<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Spinners tidak akan membenarkan nilai di luar julat 1 hingga 100. Mesej pengesahan yang sama muncul jika anda menaip rentetan yang bukan nombor. semua tanpa satu baris javascript.

anda boleh menghentikan pengesahan penyemak imbas dengan:

Menambah atribut novalidate ke elemen

Menambah atribut formnovalidate ke butang penyerahan atau imej
• Membuat input JavaScript tersuai

Menulis kawalan input tersuai adalah sukar. Anda perlu mempertimbangkan tetikus, papan kekunci, sentuhan, ucapan, kebolehcapaian, dimensi skrin, dan apa yang berlaku apabila JavaScript gagal. Anda juga mencipta pengalaman pengguna yang berbeza. Mungkin kawalan anda lebih tinggi daripada pemetik tarikh standard di desktop, iOS, dan Android, tetapi UI yang tidak dikenali akan mengelirukan beberapa pengguna.

Terdapat tiga sebab utama pemaju memilih untuk membuat input berasaskan JavaScript.

1. Kawalan standard sukar untuk gaya

Styling CSS adalah terhad dan sering memerlukan hacks, seperti overlaying input dengan labelnya :: sebelum dan :: selepas unsur-unsur pseudo. Keadaan ini bertambah baik, tetapi mempersoalkan apa -apa reka bentuk yang mengutamakan bentuk ke atas fungsi.

2. Jenis moden tidak disokong dalam pelayar lama

Pada dasarnya, anda pengekodan untuk Internet Explorer. Pengguna IE tidak akan mendapat pemetik tarikh tetapi masih boleh memasukkan tarikh dalam format YYYY-MM-DD. Jika pelanggan anda menegaskan, maka muatkan polyfill dalam IE sahaja. Tidak perlu membebankan pelayar moden.

3. Anda memerlukan jenis input baru yang tidak pernah dilaksanakan sebelum

situasi ini jarang berlaku, tetapi selalu bermula dengan medan HTML5 yang sesuai. Mereka cepat, dan mereka bekerja walaupun sebelum skrip telah dimuatkan. Anda secara progresif boleh meningkatkan bidang yang diperlukan. Sebagai contoh, percikan JavaScript dapat memastikan tarikh akhir acara kalendar berlaku selepas tarikh permulaan.

Secara ringkas: Elakkan semula mencipta kawalan HTML!

Styling Pengesahan CSS

anda boleh memohon kelas pseudo berikut untuk memasukkan medan untuk menggayakannya mengikut keadaan semasa:

anda boleh gaya teks pemegang letak input dengan :: Pseudo-Element Placeholder:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

pemilih di atas mempunyai kekhususan yang sama, jadi pesanan boleh menjadi penting. Pertimbangkan contoh ini:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Input tidak sah mempunyai teks merah, tetapi ia hanya digunakan untuk input dengan atribut kurang upaya - jadi semua input yang diaktifkan adalah hitam.

Penyemak imbas menggunakan gaya pengesahan pada beban halaman. Sebagai contoh, dalam kod berikut setiap medan tidak sah diberikan sempadan merah:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Pengguna dihadapkan dengan set kotak merah yang menakutkan sebelum mereka berinteraksi dengan borang tersebut. Menunjukkan kesilapan pengesahan selepas penyerahan pertama atau sebagai nilai diubah akan menawarkan pengalaman yang lebih baik. Di sinilah langkah JavaScript ...

javascript dan api pengesahan kekangan

API Pengesahan Kekangan menyediakan pilihan penyesuaian borang yang dapat meningkatkan pemeriksaan medan HTML standard. Anda boleh:

• Hentikan pengesahan sehingga pengguna berinteraksi dengan medan atau menyerahkan borang
• tunjukkan mesej ralat dengan gaya tersuai
• Menyediakan pengesahan tersuai yang mustahil di HTML sahaja. Ini sering diperlukan apabila anda perlu membandingkan dua input - seperti ketika anda memasukkan alamat e -mel atau nombor telefon, periksa medan kata laluan "baru" dan "mengesahkan" mempunyai nilai yang sama, atau pastikan satu tarikh datang selepas yang lain.

Pengesahan borang

Sebelum menggunakan API, kod anda harus melumpuhkan mesej pengesahan dan ralat lalai dengan menetapkan harta novalidate borang untuk benar (sama seperti menambah atribut novalidate):

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

anda kemudian boleh menambah pengendali acara - seperti ketika borang mengemukakan:

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Pengendali boleh menyemak keseluruhan borang adalah sah menggunakan kaedah CheckValidity () atau ReportValidity (), yang kembali benar apabila semua input borang sah. (Perbezaannya ialah pemeriksaan CheckValidity () sama ada sebarang input tertakluk kepada pengesahan kekangan.)

Dokumen Mozilla Jelaskan:

Acara tidak sah juga dicetuskan pada setiap bidang yang tidak sah. Ini tidak gelembung: Pengendali mesti ditambah kepada setiap kawalan yang menggunakannya.

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Borang yang sah kini boleh menanggung cek pengesahan selanjutnya. Begitu juga, bentuk yang tidak sah boleh mempunyai bidang yang tidak sah yang diserlahkan.

Pengesahan medan

bidang individu mempunyai sifat pengesahan kekangan berikut:

• Willvalidate: Mengembalikan benar jika elemen itu adalah calon untuk pengesahan kekangan.

• PengesahanMessage: Mesej pengesahan. Ini akan menjadi rentetan kosong jika medan itu sah.

• Valitity: Objek ValidityState. Ini mempunyai harta yang sah yang ditetapkan benar apabila medan itu sah. Jika ia palsu, satu atau lebih sifat berikut akan benar:

  ValidityState Keterangan .badinput Penyemak imbas tidak dapat memahami input .CustomError Mesej kesahihan tersuai telah ditetapkan .patternmismatch Nilai tidak sepadan dengan atribut corak yang ditentukan .rangeOverflow nilainya lebih besar daripada atribut maksimum .rangeunderflow nilainya kurang daripada atribut min .Stepmismatch Nilai tidak sesuai dengan peraturan atribut langkah .toolong Panjang rentetan lebih besar daripada atribut maxLength .tooshort Panjang rentetan kurang daripada atribut minlength .typemismatch Nilai bukan e -mel atau URL yang sah .valuemissing Nilai yang diperlukan adalah kosong

bidang individu mempunyai kaedah pengesahan kekangan berikut:

• setCustomValidity (mesej): Menetapkan mesej ralat untuk medan yang tidak sah. Rentetan kosong mesti diluluskan apabila medan itu sah atau medan akan kekal tidak sah selama -lamanya.
• CheckValidity (): pulangan benar apabila input sah. Harta valitity.valid melakukan perkara yang sama, tetapi checkvalidity () juga mencetuskan peristiwa yang tidak sah di lapangan yang boleh berguna.

fungsi pengendali () boleh melengkapkan melalui setiap bidang dan memohon kelas yang tidak sah ke elemen induknya di mana perlu:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Anggapkan HTML anda menentukan medan e -mel:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Skrip menggunakan kelas yang tidak sah ke

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>