Html5 menggunakan kendala untuk memverifikasi API untuk memeriksa contoh kode dari data input formulir

HTML5 memiliki optimalisasi bentuk yang besar, apakah itu semantik, komponen kecil, atau verifikasi format data. Saya kira Anda pasti akan menggunakan kompatibilitas browser sebagai alasan untuk menggunakan fitur -fitur baru ini, tetapi ini seharusnya tidak menjadi alasan mengapa Anda mandek. dilakukan. Ketika Anda benar -benar mencoba menggunakan fitur -fitur baru dari formulir ini, saya berjanji untuk jatuh cinta padanya. Jika satu -satunya cacat adalah, gaya kotak prompt default oleh browser, Anda tidak dapat mengubahnya, oke, jika Anda yakin tingkat estetika perancang produsen browser (saya yakin tingkat desain mereka lebih tinggi dari kebanyakan Orang biasa daripada kebanyakan orang biasa, baik, jika Anda tidak mempertimbangkan kompatibilitas gaya), cepatlah dan sekolah!

HTML5 memberikan banyak dukungan asli untuk verifikasi format data, seperti ::

 <input type = 'email'/>

Saat mengklik tombol pengiriman, jika format yang Anda masukkan tidak memenuhi email, itu akan menyebabkannya tidak dapat mengirimkan, dan browser akan meminta Anda untuk membuat pesan kesalahan.

Misalnya, di bawah Chrome:

1. Hanya saat Anda mengirimkannya, Anda akan memicu verifikasi browser

2. Informasi prompt browser yang berbeda berbeda

3. Ketika beberapa input tidak memenuhi persyaratan, hanya satu kesalahan yang akan diminta.

Jangan berpikir bahwa ketika jenis input sama dengan TEL, jika Anda memasukkan format nomor telepon, Anda akan diblokir oleh browser dan meminta pesan kesalahan saat mengirimkan. keyboard digital, dan tidak berperan dalam verifikasi data.

Anda dapat menggunakan atribut pola untuk mengatur verifikasi format khusus untuk browser tanpa memberikan format data verifikasi asli. Nilai atribut pola adalah ekspresi reguler (string):

 <input type = 'Tel' pola = '[0-9] {11}' if (this.value.length> 3) {// Kondisi penilaian sepenuhnya disesuaikan input.setCustomValidity ('format salah');} else { Input.setCustomValidity ('')}});

Setiap input keyboard, kode akan menentukan apakah formatnya benar, dan kemudian panggil setCustomValidity untuk mengatur nilai valueMessage. Jangan berpikir bahwa setiap browser utama akan meminta hasil Anda apakah hasilnya benar.

Jika Anda tidak memikirkannya, Anda pasti akan bertanya, sejak itu, mengapa Anda harus mengikat acara keyboard untuk dimasukkan, dan Anda perlu menilai untuk setiap masukan? Kirimkan kejadian secara langsung untuk formulir.

Sebagai pengguna, tentu saja, setelah mengetahui bahwa saya telah memasukkan format yang salah, kotak teks menjadi merah (atau ada tip lain). Dan setiap kali saya memasukkan karakter, jika benar, kotak teks akan kembali normal. Kami dapat menggunakan kelas pseudo CSS untuk mengimplementasikan fungsi ini:

 Input: Diperlukan {latar belakang-warna: #ffe14d;} /* Kelas pseudo ini dinilai melalui properti ValueMessage* / Input: Invalid {Border: 2px solid red;}.

Kategori pseudo yang diperlukan di atas memberikan warna latar belakang kuning untuk input yang harus -tetapi kosong, sedangkan kelas semu yang tidak valid di bawah ini akan menambahkan sisi merah 2px ke semua input yang tidak diramalkan. Kami dapat menambahkan kelas input ke kotak input kami sekarang.

Kondisi penilaian pseudo ini menilai apakah Anda dapat mengirimkan formulir formulir. -Dara gaya.

Kerugian lain adalah bahwa ketika input diatur ke diperlukan, ketika inisialisasi, karena itu kosong, kategori pseudo yang tidak valid akan bekerja di atasnya.

Kami dapat menambahkan perangkat pemilihan induk. Invalid sebelum kategori pseudo ini. Anda dapat mengatur acara pengiriman.

Form.addeventListener ('tidak valid', function () {this.className = 'tidak valid'}, true) karena Invaild adalah sebuah insiden, bukan acara Formulir, jadi kami mengatur parameter ketiga untuk menggunakan TRUE untuk menggunakan event capture. Dengan cara ini, itu dilakukan.

Nah, sudah waktunya untuk meringkas pengetahuan yang telah kita pelajari dan menciptakan praktik terbaik:

 <! {border: 2px solid red;} </style> </ head> <body> <form id = Form> <label> Email: <input type = email yang diperlukan id = email> </label> <label> idcard: < Input ID yang Diperlukan = IDCard> </boject> <Input Type = Kirim ID = Kirim> </form> <script> var email = document.getElementById ('email'); ); } Else {this.setCustomValidity ('')}});

Tangkapan layar setelah berjalan adalah sebagai berikut:

Di atas adalah semua isi artikel ini.