Untuk detailnya

Sebelum diskusi mendalam tentang verifikasi bentuk, mari kita pikirkan tentang arti sebenarnya dari verifikasi bentuk formulir. Sejauh menyangkut intinya, verifikasi bentuk adalah sistem yang mendeteksi data kontrol yang tidak valid untuk pengguna akhir dan menandai kesalahan ini. Dengan kata lain, verifikasi formulir adalah melakukan serangkaian inspeksi sebelum mengirimkan server dan memberi tahu pengguna untuk memperbaiki kesalahan mereka.

Tapi apa verifikasi bentuk sebenarnya?

Ini adalah optimasi.

Alasan mengapa verifikasi formulir adalah optimasi adalah karena tidak cukup untuk memastikan bahwa data formulir yang diserahkan ke server hanya melalui mekanisme verifikasi formulir adalah benar dan efektif. Di sisi lain, verifikasi formulir desain adalah membuat aplikasi web melempar kesalahan lebih cepat. Dengan kata lain, yang terbaik adalah menggunakan mekanisme pemrosesan browser yang dibangun -dalam untuk menginformasikan halaman web pengguna yang berisi nilai kontrol formulir yang tidak valid. Di masa lalu, data berbalik di internet hanya untuk membiarkan server memberi tahu pengguna bahwa ia telah memasukkan data yang salah. Jika browser benar -benar mampu ditangkap sebelum meninggalkan klien, maka kita harus menggunakan keuntungan ini.

Namun, pemeriksaan formulir browser tidak cukup untuk menangani semua kesalahan.

Setelah mengatakan itu, HTML5 masih memperkenalkan delapan metode untuk memverifikasi kebenaran data kontrol formulir. Mari kita lihat secara berurutan, tapi mari kita perkenalkan objek Nalan Pencarian untuk umpan balik untuk memverifikasi statusnya.

Dalam browser yang mendukung verifikasi formulir HTML5, Anda dapat mengakses objek validitas validitas melalui kontrol formulir:

 var value = document.myform.myinput.validity;

Baris kode ini memperoleh objek validitas validitas yang disebut myInput. Objek berisi referensi ke delapan status verifikasi dan hasil verifikasi akhir.

Metode panggilan adalah sebagai berikut:

 Valcheck.Valid

Setelah eksekusi, kami akan mendapatkan nilai boolean yang menunjukkan apakah kontrol formulir telah melewati semua kendala verifikasi. Anda dapat memperlakukan karakteristik nilai sebagai hasil verifikasi akhir: jika kedelapan kendala dilewatkan, karakteristik nilai itu benar, jika tidak, selama ada kendala yang gagal, logo nilai adalah semua S.

Seperti yang disebutkan sebelumnya, ada delapan kemungkinan kendala verifikasi dalam elemen bentuk apa pun. Setiap kondisi memiliki nama karakteristik yang sesuai dalam objek validitas, yang dapat diakses dengan cara yang sesuai. Mari kita analisis satu per satu untuk melihat bagaimana mereka terkait dengan kontrol formulir, dan bagaimana memeriksanya berdasarkan objek validitas:

Tujuan: Pastikan nilai dalam kontrol formulir telah diisi.

Penggunaan: Dalam kontrol formulir, atur fitur yang diperlukan ke True.

Contoh:

 <Input Tipe = Nama Teks = MyText Diperlukan>

Instruksi terperinci: Jika kontrol formulir menetapkan fitur yang diperlukan, kontrol akan selalu tidak valid sebelum pengguna mengisi atau mengisi nilai dengan panggilan kode. Misalnya, kotak input teks kosong tidak dapat melewati cek yang diperlukan, kecuali memasukkan teks apa pun di dalamnya. Ketika nilai input kosong, penilai mengembalikan true.

Tujuan: Untuk memastikan pencocokan nilai kontrol dan tipe yang diharapkan (seperti Numbe, Email, URL, dll.).

Penggunaan: Tentukan nilai karakteristik tipe kontrol formulir.

Contoh:

 <Jenis input = nama email = myemail>

Instruksi terperinci: Jenis kontrol formulir khusus tidak hanya digunakan untuk menyesuaikan keyboard ponsel. Simbol dalam alamat email, atau nilai input dari Kontrol Type angka bukanlah angka yang efektif, maka browser akan menandai kontrol ini untuk menunjukkan bahwa jenisnya tidak cocok. Tidak peduli kesalahan apa, Typemismatch akan kembali ke True.

Tujuan: Verifikasi apakah input valid sesuai dengan aturan format yang ditetapkan pada kontrol formulir.

Penggunaan: Tetapkan fitur pola pada kontrol formulir, dan sumur memberikan aturan pencocokan yang sesuai.

Contoh:

 <input type = name teks = creditCardNumber Pattern = [0-9] {16} target = '_lank'> Mekanisme verifikasi ekspresi reguler. Ketika fitur pola diatur ke kontrol, selama nilai kontrol input tidak memenuhi aturan mode, PatternMishatch akan mengembalikan nilai sebenarnya. Dari dua aspek pemandu pengguna dan referensi teknis, Anda harus menetapkan karakteristik judul dalam kontrol formulir yang berisi karakteristik pola untuk menjelaskan aturan.
 4. Toolong
 Tujuan: Hindari nilai input yang mengandung terlalu banyak karakter.
 Penggunaan: Atur karakteristik maxlength pada kontrol formulir.
 Contoh:
 <Input Type = Teks Nama = LimitedDText MaxLength = 140>
 Deskripsi terperinci: Jika panjang nilai input melebihi maxlength, fitur toolong akan mengembalikan true. Meskipun kontrol formulir biasanya terbatas pada panjang maksimum ketika pengguna input, dalam beberapa kasus, seperti pengaturan program, itu masih akan melebihi nilai maksimum.
 5. Rangeunderflow
 Tujuan: Batasi nilai minimum kontrol numerik.
 Penggunaan: Atur fitur min untuk kontrol formulir dan berikan nilai minimum yang diijinkan.
 Contoh:
 <Input Type = Range Name = AgeCheck Min = 18>
 Instruksi terperinci: Dalam kontrol formulir yang perlu diperiksa, nilainya cenderung sementara lebih rendah dari batas bawah pengaturan. Pada saat ini, fitur Rangeunderflow dari ValidityState akan kembali ke True.
 6. Rangeoverflow
 Tujuan: Batasi nilai maksimum kontrol numerik.
 Penggunaan: Tetapkan karakteristik maks untuk kontrol formulir dan berikan nilai maksimum.
 Contoh:
 <Input Tipe = Range Name = KidageCheck Max = 12>
 Deskripsi terperinci: Mirip dengan Rangeunderflow, jika nilai kontrol bentuk lebih besar dari maks, karakteristik akan mengembalikan true.
 7. StepMishatch
 Tujuan: Pastikan bahwa nilai input memenuhi min, max, dan langkah.
 Penggunaan: Tetapkan karakteristik langkah untuk kontrol formulir, tentukan peningkatan nilai.
 Contoh:
 <Input Tipe = Range Name = ConfidenceLevel Min = 0 Max = 100 Langkah = 5>
 Deskripsi terperinci: Kendala ini digunakan untuk memastikan bahwa nilainya memenuhi persyaratan min, max, dan langkah. Dengan kata lain, nilai saat ini harus merupakan jumlah dari kelipatan nilai minimum dan nilai fitur langkah. Misalnya, dari 0 hingga 100, nilai fitur langkah adalah 5, pada saat ini tidak akan ada 17, jika tidak, StepMishatch akan mengembalikan nilai sebenarnya.
 8. CustomError
 Tujuan: Pengiriman Kode aplikasi dengan jelas mengatur dan menghitung kesalahan.
 Penggunaan: Hubungi setCustomValidity (pesan) untuk menempatkan bagian kontrol formulir dalam status CustomError.
 Contoh:
 PasswordConfirmativeField.setCustomValidity (Nilai Kata Sandi tidak cocok.);
 Instruksi terperinci: Ketika mekanisme verifikasi browser tidak berlaku, informasi kesalahan verifikasi khusus perlu ditampilkan. Ketika nilai input tidak memenuhi aturan semantik, kode aplikasi harus mengatur pesan verifikasi khusus ini.
 Kasus khas pesan verifikasi yang disesuaikan adalah untuk memverifikasi apakah nilai -nilai dalam kontrol kontrol konsisten. Misalnya, kata sandi dan kata sandi mengkonfirmasi bahwa nilai -nilai kedua pecundang tidak cocok. Selama pesan verifikasi disesuaikan, kontrol akan dalam keadaan tidak valid, dan CustomError akan mengembalikan true. Untuk menghapus kesalahan, panggil saja setCustomValidity () pada kontrol.
 Nah, di atas adalah 8 metode dasar yang diverifikasi oleh tabel saja di HTML5. Saya juga berharap semua orang akan mendukung vevb wulin.com.