Bagaimana saya menggunakan JavaScript untuk mengesahkan borang HTML5?

Bagaimana saya menggunakan JavaScript untuk mengesahkan borang HTML5?

JavaScript menawarkan beberapa cara untuk mengesahkan borang HTML5, menyediakan cek sisi klien sebelum data dihantar ke pelayan. Ini menghalang permintaan pelayan yang tidak perlu dan meningkatkan pengalaman pengguna dengan memberikan maklum balas segera. Pendekatan yang paling biasa melibatkan penggunaan pendengar acara untuk menangkap percubaan penyerahan borang dan kemudian menggunakan JavaScript untuk memeriksa bidang borang.

event.PreventDefault (); // Mencegah penyerahan borang lalai Biarkan isvalid = true; // semak jika medan nama diisi Let Name = Document.GetElementById (& quot; Name & quot;). Value; jika (nama === & quot; & quot;) {alert (& quot; Sila masukkan nama anda. & quot;); isValid = palsu; } // Semak jika medan e -mel adalah alamat e -mel yang sah LET EMAIL = document.getElementById (& quot; email & quot;). Nilai; jika (! isvalidemail (e -mel)) {alert (& quot; Sila masukkan alamat e -mel yang sah. & quot;); isValid = palsu; } // ... lebih banyak cek pengesahan ... jika (isvalid) {// serahkan borang jika semua cek lulus ini.submit (); }}; // fungsi pembantu untuk mengesahkan format e -mel (contoh mudah) fungsi isvalidemail (email) {return/^[^\ s@]@[^\ s@] \. [^\ S@] $/. }

Coretan kod ini menghalang penyerahan borang lalai dan kemudian melakukan pengesahan asas pada medan "Nama" dan "E -mel". Jika pengesahan gagal, ia memaparkan amaran. Jika ia berlalu, this.submit () mencetuskan penyerahan bentuk sebenar. Anda akan menggantikan ulasan pemegang tempat dengan cek untuk bidang lain dan peraturan pengesahan yang diperlukan. Ingat untuk menggantikan & quot; myForm & quot; , & quot; nama & quot; , dan & quot; email & quot; dengan bentuk sebenar dan ID medan anda. Pengesahan yang lebih canggih mungkin melibatkan ungkapan biasa untuk corak yang lebih kompleks atau perpustakaan luaran untuk ciri -ciri canggih. Berikut adalah beberapa perkara utama:

• Mengutamakan pengalaman pengguna: Sediakan mesej ralat yang jelas dan berguna yang membimbing pengguna tentang cara membetulkan input mereka. Elakkan mesej ralat generik. Gunakan isyarat visual, seperti menonjolkan medan tidak sah atau memaparkan mesej ralat berhampiran medan masing-masing. Sentiasa melakukan pengesahan sisi pelayan sebagai langkah keselamatan penting untuk melindungi daripada input berniat jahat. Pengesahan sisi pelanggan meningkatkan pengalaman pengguna, tetapi pengesahan sisi pelayan adalah penting untuk integriti data dan keselamatan.
• Gunakan pengendalian ralat yang konsisten: Mengekalkan gaya yang konsisten untuk memaparkan mesej ralat sepanjang borang anda. Pertimbangkan dengan menggunakan bekas mesej ralat yang berdedikasi untuk setiap medan.
Pastikan ia modular dan diselenggara: memecahkan logik pengesahan anda ke dalam fungsi yang boleh diguna semula untuk meningkatkan kebolehbacaan dan penyelenggaraan. Ini juga memudahkan untuk menguji peraturan pengesahan individu.
• pengguna kurang upaya. Gunakan atribut ARIA yang sesuai untuk menyampaikan status pengesahan kepada pembaca skrin.
• Pencegahan ralat: Borang reka bentuk untuk meminimumkan kesilapan. Gunakan jenis input seperti e-mel , nombor , date untuk memanfaatkan pengesahan penyemak imbas terbina dalam, dan memberikan arahan dan contoh yang jelas. HTML5 Pengesahan terbina dalam?

  Ya, anda boleh dan sering harus menggunakan pengesahan JavaScript bersama pengesahan HTML5 terbina dalam. Mereka saling melengkapi:

  • Pengesahan HTML5: Menyediakan pengesahan asas, penyemak imbas asli untuk jenis input biasa (e-mel, nombor, dll.). Ini menawarkan cara yang cepat dan mudah untuk mengesahkan jenis data asas. Ia juga boleh diakses, kerana penyemak imbas mengendalikan mesej ralat.
  • Pengesahan JavaScript: membolehkan peraturan pengesahan yang lebih kompleks dan tersuai yang melampaui keupayaan ciri-ciri terbina dalam HTML5. Anda boleh mengesahkan sumber data luaran, melaksanakan corak pengesahan tersuai, atau melakukan cek yang lebih canggih. Pengesahan HTML5 bertindak sebagai barisan pertahanan pertama, memberikan maklum balas segera, sementara JavaScript mengendalikan cek yang lebih rumit. Walau bagaimanapun, ingat bahawa hanya bergantung pada pengesahan klien (sama ada HTML5 atau JavaScript) adalah tidak selamat. Sentiasa melakukan pengesahan sisi pelayan.

    Bagaimana saya boleh memberikan mesej ralat tersuai dengan pengesahan borang javascript html5?

    pada elemen input. Mesej ini akan dipaparkan oleh mekanisme pengesahan terbina dalam penyemak imbas.

  let namefield = document.getelementById (& quot; name & quot;); jika (namefield.value.length & lt; 3) {namefield.setCustomValidity (& quot; nama mestilah sekurang -kurangnya 3 aksara panjang. & quot;); } else {namefield.setCustomValidity (& quot; & quot;); / Kod pengesahan JavaScript anda kemudiannya boleh mengisi bekas ini dengan mesej tersuai anda. Ini menawarkan lebih banyak kawalan ke atas penampilan dan penempatan mesej ralat.
• Menggunakan perpustakaan: JavaScript Borang pengesahan perpustakaan sering menyediakan ciri -ciri untuk membuat dan menguruskan mesej ralat tersuai dengan lebih elegan. Perpustakaan ini biasanya mengendalikan paparan dan gaya mesej ralat secara automatik.

Mesej ralat tersuai meningkatkan pengalaman pengguna dengan menyediakan lebih banyak konteks dan panduan yang berguna, tetapi mereka tidak boleh menggantikan cek sisi pelayan.

Atas ialah kandungan terperinci Bagaimana saya menggunakan JavaScript untuk mengesahkan borang HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!