Bagaimana Menerapkan Validasi Formulir di JS Angular?

Validasi adalah metode untuk otentikasi pengguna. Ini digunakan di semua Teknologi Web seperti dan . Tapi hari ini fokus kita adalah pada Validasi di Angular JS dengan urutan sebagai berikut:

• Apa itu validasi formulir?
• Validasi Formulir di Angular JS
• Langkah-langkah dalam Validasi Formulir
• Kode

Apa itu validasi Formulir?

Validasi formulir adalah teknik yang digunakan untuk memvalidasi formulir HTML. Mari kita ambil contoh sederhana untuk mengandaikan pengguna memiliki form HTML dan form HTML memiliki field yang berbeda, field ini divalidasi oleh form validator ketika kita ingin memvalidasi form kita hanya perlu memeriksa nilai dari field tertentu dengan ekspresi validator .

Jika ekspresi reguler dan nilai bidang sama maka kita dapat mengatakan formulir kita divalidasi. Dalam bentuk HTML, ada berbagai jenis validasi seperti email, wajib, min, maks, kata sandi, dll.

Validasi Formulir di Angular JS

Mari kita bicara tentang bagaimana kita bisa memvalidasi formulir di JS sudut. Angular JS menyediakan berbagai jenis properti validasi formulir yang dapat kita gunakan untuk memvalidasi formulir atau mendapatkan data dari formulir.

• $ valid : Properti ini memberi tahu apakah bidang tersebut valid atau tidak dengan menerapkan aturan yang sesuai.

• $ tidak valid : Seperti namanya tidak valid ubin ini cuaca lapangan tidak valid atau tidak berdasarkan aturan yang sesuai.

• $ murni : Ini akan mengembalikan true dalam bentuk input field tidak digunakan.

  
  
  

• $ kotor : Ini akan mengembalikan nilai true dalam bentuk input field yang digunakan.

• $ tersentuh : BooleanTrue jika masukan telah dikaburkan.

Untuk mengakses formulir: .

Untuk mengakses masukan: ..

Sekarang mari kita jelaskan validasi formulir di JS sudut dengan contoh jadi pertama-tama kita membuat dua file, satu adalah app.js dan yang lainnya adalah index.html. File index.htm kami berisi formulir HTML sederhana yang memiliki validasi sudut dan file app.js kami berisi kode backend untuk menangani validasi formulir di halaman index.html.

Ituindex.htmlformulir isi halaman dengannovalidateproperti dan apa artinya sebenarnya?

Properti novalidate di tag formulir memberi tahu HTML bahwa kita dapat menggunakan validasi formulir kustom kita. Jika kita tidak memberikan properti novalidate maka dan formulir HTML divalidasi dengan menggunakan properti validasi formulir default HTML5.

perbedaan antara c c ++ dan java

Langkah-langkah dalam Validasi Formulir

Dalam formulir kami, kami membuat 6 bidang dalam formulir kami ini adalah nama depan, nama belakang, email, telepon, kata sandi, dan pesan.

1. Pertama, kami menambahkan validator bidang yang diperlukan, validator ini memberi tahu pengguna bahwa bidang tertentu diperlukan.

2. Berikutnya adalah bidang email jika pengguna tidak memberikan email yang valid maka validator email kami menampilkan kesalahan validasi email.

3. Kami mengatur panjang minimum dan maksimum dalam validasi kata sandi kami panjang minimum adalah 5 dan panjang maksimum adalah 8 sehingga pengguna dapat memberikan kata sandi yang valid antara 5 hingga 8 karakter.

4. Terakhir, kami mengatur telepon dan bidang pesan yang diperlukan dan secara khusus, menerapkan validasi nomor pada arsip telepon.

Kode untuk Validasi Formulir di Angular JS

index.html

Contoh lingkup sudut Nama Depan 
 
File ini wajib diisi
akhirnya dan diselesaikan di java
Nama keluarga 
 
File ini wajib diisi
Surel 
 
File ini wajib diisi
 
Bukan email yang valid
Telepon 
 
File ini wajib diisi
 
Ini bukan ponsel yang valid
Kata sandi 
 
File ini wajib diisi
 
Kata sandi antara 5 hingga 8 karakter
Pesan 
 
File ini wajib diisi
Kirimkan

app.js

var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})

Mari kita bahas tentang beberapa arahan validasi yang digunakan dalam formulir:

• ng-dibutuhkan : Untuk menyediakan bidang yang dibutuhkan
• ng-show : Untuk menampilkan pesan kesalahan berdasarkan kondisi (periksa properti validasi)
• dari minlength : Untuk memberikan panjang minimum
• ng-maxlength : Untuk memberikan panjang maksimal
• pola : Untuk mencocokkan pola tertentu
• ng-model : Mengikat bidang dengan properti validasi seperti $ error, $ valid, dll.

Dengan ini, kita sampai pada akhir artikel Validasi di JS Angular. Saya harap Anda mendapatkan pemahaman tentang berbagai hal yang harus dipertimbangkan untuk Validasi formulir di Angular JS.

Jika Anda ingin mempelajari lebih lanjut tentang kerangka kerja Angular, lihat yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini akan membantu Anda memahami Angular secara mendalam dan membantu Anda menguasai subjek.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar artikel ini dan Kami akan menghubungi Anda kembali.