Pengesahan adalah proses memastikan data betul dan lengkap.
Dalam contoh dunia nyata, mari kita anggap laman web yang memerlukan borang pendaftaran dilengkapkan sebelum mendapat akses penuh ke laman web ini. Halaman pendaftaran akan mempunyai medan input untuk nama pengguna, kata laluan, id e-mel dan sebagainya.
Semasa pengguna menyerahkan borang, biasanya pengesahan akan berlaku terlebih dahulu sebelum maklumat dihantar ke pelayan. Pengesahan ini akan berusaha memastikan sejauh mungkin bahawa maklumat untuk medan input dimasukkan dengan cara yang betul.
Sebagai contoh, id e-mel selalu dalam format Alamat e-mel ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya. ; jika seseorang memasukkan hanya nama pengguna dalam id e-mel, maka idealnya pengesahannya akan gagal. Oleh itu, pengesahan kelihatan melakukan pemeriksaan asas ini sebelum butiran dihantar ke pelayan untuk proses selanjutnya.
Dalam tutorial ini, anda akan belajar-
- Pengesahan borang menggunakan HTML5
- Pengesahan borang menggunakan $ kotor, $ sah, $ tidak sah, $ murni
- Pengesahan borang menggunakan AngularJS Auto Validate
- Maklum balas pengguna dengan butang Ladda
Pengesahan borang menggunakan HTML5
Pengesahan borang adalah proses pra-mengesahkan maklumat yang dimasukkan pada borang web oleh pengguna sebelum dihantar ke pelayan. Selalu lebih baik mengesahkan maklumat di pihak pelanggan itu sendiri. Ini kerana ia menambahkan lebih sedikit overhead jika pengguna harus diberikan borang lagi jika maklumat yang dimasukkan salah.
Mari kita lihat bagaimana pengesahan borang dapat dilakukan dalam HTML5.
Dalam contoh kami, kami akan menunjukkan satu borang pendaftaran mudah kepada pengguna di mana pengguna perlu memasukkan butiran seperti nama pengguna, kata laluan, id e-mel, dan usia.
Borang akan mempunyai kawalan pengesahan untuk memastikan bahawa pengguna memasukkan maklumat dengan cara yang betul.
Event Registration Guru99 Global Event
Penjelasan Kod:
- Untuk jenis input teks, kami menggunakan atribut 'diperlukan'. Ini bermaksud bahawa kotak teks tidak boleh kosong ketika formulir dikirimkan, dan semacam teks harus ada di kotak teks.
- Jenis input seterusnya adalah kata laluan. Oleh kerana jenis input ditandai sebagai kata laluan, ketika pengguna memasukkan teks apa pun di lapangan, itu akan ditutup.
- Oleh kerana jenis input ditentukan sebagai e-mel, teks di dalam kotak harus sesuai dengan corak Alamat e-mel ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya. .
- Apabila jenis input ditandai sebagai angka, jika pengguna mencoba memasukkan watak apa pun menggunakan papan kekunci atau abjad, itu tidak akan dimasukkan ke dalam kotak teks.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Untuk melihat validasi formulir dalam tindakan, klik butang Kirim tanpa memasukkan maklumat di layar.
Setelah butang kirim diklik, pop-up akan muncul menunjukkan ralat pengesahan bahawa bidang perlu diisi.
Oleh itu, pengesahan untuk kawalan yang ditandai sebagai diperlukan, menyebabkan mesej ralat ditunjukkan jika pengguna tidak memasukkan nilai apa pun di medan teks.
Apabila pengguna memasukkan nilai apa pun dalam kawalan kata laluan, anda akan melihat simbol '*' yang digunakan untuk menutupi watak yang dimasukkan.
Mari masukkan id e-mel yang salah dan klik butang hantar. Setelah butang kirim diklik, pop-up akan muncul menunjukkan kesalahan pengesahan bahawa bidang perlu mempunyai simbol @.
Oleh itu, pengesahan untuk kawalan yang ditandai sebagai kawalan e-mel akan menyebabkan mesej ralat ditunjukkan jika pengguna tidak memasukkan id e-mel yang betul di medan teks.
Akhirnya, apabila anda mencuba memasukkan sebarang watak dalam kawalan teks usia, watak tersebut tidak akan dimasukkan di skrin. Kontrol hanya akan diisi dengan nilai apabila nombor dimasukkan dalam kawalan.
Pengesahan borang menggunakan $ kotor, $ sah, $ tidak sah, $ murni
AngularJS memberikan sifat tambahan untuk pengesahan. AngularJS menyediakan sifat berikut untuk kawalan untuk tujuan pengesahan
- $ kotor - Pengguna telah berinteraksi dengan kawalan
- $ valid - Kandungan medan adalah sah
- $ tidak sah - Kandungan medan tidak sah
- $ pristine - Pengguna belum lagi berinteraksi dengan kawalan
Berikut adalah langkah-langkah yang perlu diikuti untuk melakukan pengesahan sudut.
Langkah 1) Gunakan harta tidak sah semasa menyatakan borang. Properti ini memberitahu HTML5 bahawa pengesahan akan dilakukan oleh AngularJS.
Langkah 2) Pastikan borang mempunyai nama yang ditentukan untuknya. Sebab untuk melakukan ini adalah bahawa, ketika menjalankan pengesahan sudut, nama borang akan digunakan.
Langkah 3) Pastikan setiap kawalan juga mempunyai nama yang ditentukan untuknya. Sebab untuk melakukan ini adalah bahawa, ketika menjalankan pengesahan sudut, nama kawalan akan digunakan.
Langkah 4) Gunakan arahan ng-show untuk memeriksa sifat $ kotor, $ tidak sah dan $ sah untuk kawalan.
Mari lihat contoh, yang merangkumi langkah-langkah yang disebutkan di atas.
Dalam contoh kami,
Kami hanya akan mempunyai medan teks sederhana di mana pengguna perlu memasukkan nama Topik di kotak teks. Sekiranya ini tidak dilakukan, kesalahan pengesahan akan dicetuskan, dan mesej ralat akan ditunjukkan kepada pengguna.
Event Registration Guru99 Global Event
Penjelasan Kod:
- Perhatikan bahawa kami telah memberikan nama untuk Borang yang "myForm". Ini diperlukan semasa mengakses kawalan pada borang untuk pengesahan AngularJS.
- Menggunakan harta "novalidate" untuk memastikan bahawa borang HTML membolehkan AngularJS menjalankan pengesahan.
- Kami menggunakan arahan ng-show untuk memeriksa harta "$ kotor" dan "$ tidak sah". Ini bermaksud bahawa jika kotak teks telah diubah, maka nilai harta tanah "$ kotor" akan menjadi benar. Juga, sekiranya nilai kotak teks kosong, harta "$ tidak sah" akan menjadi kenyataan. Oleh itu, jika kedua-dua sifat tersebut benar, maka pengesahan akan gagal untuk kawalan. Oleh itu, jika kedua-dua nilai itu benar, persembahan ng juga akan menjadi benar, dan kawalan span dengan watak warna merah akan dipaparkan.
- Dalam hal ini, kami memeriksa harta "$ error" yang juga dinilai benar kerana kami telah menyebutkan untuk kawalan bahawa nilai harus dimasukkan untuk kawalan. Dalam kes seperti itu, di mana tidak ada data yang dimasukkan dalam kotak teks, kawalan span akan memaparkan teks "Nama pengguna diperlukan".
- Sekiranya nilai kawalan kotak teks tidak sah, kami juga ingin menonaktifkan butang kirim sehingga pengguna tidak dapat menyerahkan borang. Kami menggunakan harta "ng-disable" untuk kawalan untuk melakukan ini berdasarkan nilai bersyarat dari sifat "$ kotor" dan "$ tidak sah" dari kawalan tersebut.
- Di pengawal, kita hanya menetapkan nilai awal nilai kotak teks ke teks 'AngularJS'. Ini hanya dilakukan untuk menetapkan beberapa nilai lalai ke kotak teks ketika borang pertama kali dipaparkan. Ini menunjukkan dengan lebih baik bagaimana pengesahan berlaku untuk bidang kotak teks.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Apabila bentuk mula-mula dipaparkan, kotak teks memaparkan nilai "AngularJS" dan "butang kirim" diaktifkan. Sebaik sahaja anda mengeluarkan teks dari kawalan, mesej ralat pengesahan diaktifkan, dan butang Kirim dilumpuhkan.
Tangkapan skrin di atas memaparkan dua perkara
- Butang hantar dilumpuhkan
- Tidak ada nama topik dalam kotak teks Topik. Oleh itu, ia memancarkan mesej ralat "Nama pengguna diperlukan."
Pengesahan borang menggunakan AngularJS Auto Validate
Terdapat kemudahan di AngularJS untuk mengesahkan semua kawalan pada borang secara automatik tanpa perlu menulis kod khusus untuk pengesahan tersebut. Ini dapat dilakukan dengan memasukkan modul khusus yang disebut "jcs-AutoValidate."
Dengan adanya modul ini, anda tidak perlu meletakkan kod khas untuk melakukan pengesahan atau menunjukkan mesej ralat. Ini semua dikendalikan oleh kod di dalam JCS-AutoValidate.
Mari kita lihat contoh mudah bagaimana mencapainya.
Dalam contoh ini,
Kami hanya akan mempunyai bentuk sederhana dengan kawalan kotak teks yang merupakan bidang yang diperlukan. Mesej ralat harus dipaparkan jika kawalan ini tidak diisi.
Event Registration Guru99 Event
Penjelasan Kod:
- Pertama, kita perlu memasukkan skrip "jcs-auto-validate.js" yang mempunyai semua fungsi pengesahan automatik.
- Kita perlu memastikan bahawa setiap elemen termasuk "div tag" diletakkan dalam kelas "form-group".
- Juga perlu memastikan bahawa setiap elemen (yang merupakan elemen HTML seperti kawalan input, kawalan span, kawalan div dan sebagainya) seperti kawalan input juga diletakkan dalam kelas kumpulan-bentuk.
- Sertakan jcs-autovalidate dalam modul JS AngularJS anda.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Secara lalai semasa anda menjalankan kod anda, borang di atas akan ditunjukkan mengikut kod HTML.
Sekiranya anda cuba Kirim borang, mesej ralat akan muncul dengan mengatakan, "Medan ini wajib diisi." Semua ini dilakukan dengan pilihan JCS-AutoValidate.
Maklum balas pengguna dengan butang Ladda
Butang "ladda" adalah kerangka khas yang dibina untuk butang di atas JavaScript untuk memberikan kesan visual pada butang ketika ditekan.
Oleh itu, jika butang diberi atribut "ladda" dan ditekan, kesan putaran akan ditunjukkan. Juga, terdapat pelbagai gaya data yang tersedia untuk butang untuk memberikan kesan visual tambahan.
Mari kita lihat contoh bagaimana melihat butang "ladda" dalam tindakan. Kami hanya akan melihat borang ringkas yang mempunyai butang kirim. Apabila butang ditekan, kesan putaran akan ditunjukkan pada butang.
Event Registration Guru99 Event
Penjelasan Kod:
- Kami menggunakan arahan "ng-submit" untuk memanggil fungsi yang disebut "submit". Fungsi ini akan digunakan untuk mengubah atribut ladda dari butang kirim.
- Atribut ladda adalah atribut khas dari kerangka ladda. Atribut inilah yang menambahkan kesan putaran untuk dikawal. Kami menetapkan nilai atribut ladda pada penyampaian pemboleh ubah.
- Properti gaya data sekali lagi merupakan atribut tambahan yang ditawarkan oleh rangka kerja ladda, yang hanya menambahkan kesan visual yang berbeza pada butang kirim.
- Modul 'AngularJS-ladda' perlu ditambahkan ke aplikasi AngularJS.JS agar rangka kerja ladda berfungsi.
- Pada mulanya, kami menentukan dan menetapkan nilai pemboleh ubah yang disebut 'submitting' ke false. Nilai ini ditetapkan untuk atribut ladda pada butang kirim. Dengan menetapkannya pada awalnya palsu, kita mengatakan bahawa kita tidak mahu butang kirim masih mempunyai kesan ladda.
- Kami menyatakan fungsi yang dipanggil ketika butang kirim ditekan. Dalam fungsi ini, kita menetapkan 'penyerahan' menjadi benar. Ini akan menyebabkan kesan ladda digunakan pada butang hantar.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Apabila borang mula-mula dipaparkan, butang kirim ditunjukkan dalam bentuknya yang ringkas.
Apabila butang kirim ditekan, pemboleh ubah penyerahan di pengawal ditetapkan ke benar. Nilai ini diteruskan ke atribut "ladda" pada butang kirim yang menyebabkan kesan putaran pada butang.
Ringkasan
- Pengesahan untuk kawalan HTML kotak teks dapat dilakukan dengan menggunakan atribut 'diperlukan'.
- Dalam HTML5, ada kontrol baru yang ditambahkan seperti kata laluan, e-mel, dan nombor yang memberikan set validasi mereka sendiri.
- Pengesahan borang di AngularJS dijaga dengan melihat nilai $ kotor, $ sah, $ tidak sah dan $ murni dari kawalan borang.
- Pengesahan automatik dalam aplikasi AngularJS juga dapat dicapai dengan menggunakan modul validasi JCS-auto.
- Butang Ladda dapat ditambahkan ke aplikasi Angular.js untuk memberikan sedikit nuansa visual yang ditingkatkan kepada pengguna ketika butang ditekan.