PANDUAN RAMAH UNTUK PEMULA TENTANG CARA VALIDASI DETAIL PENGGUNA PADA FORMULIR HALAMAN WEB MENGGUNAKAN JAVASCRIPT.
Hi.
Anda mungkin membaca artikel ini karena ingin memahami JavaScript –mulai dari dasar (yang mencakup validasi formulir) dan Anda memerlukan panduan singkat. Ya, mungkin Anda berada di tempat yang tepat.Tunggu. Ini jelas bukan karena saya ahli dalam JavaScript, tetapi Anda tahu, hingga beberapa malam yang lalu, saya berjuang keras dalam memahami dan menulis JS dan pada saat yang intens saat mencoba memahaminya, saya membuka diri beberapa peretasan cepat. Jadi meskipun saya benar-benar memahami perjuangan Anda, saya juga dapat membantu Anda dengan cara sederhana (semoga) membantu Anda memahami JS dengan lebih baik.
Dalam artikel ini, saya akan menunjukkan kepada Anda (melalui proses langkah demi langkah) cara memvalidasi detail pengguna di formulir halaman web Anda melalui penggunaan loop, pernyataan if/else, tag objek, dan perbandingan.
Tetaplah bersamaku.
Sebelum kita melanjutkan langkah-langkah solusi kita, menurut saya sebaiknya kita membicarakan 'masalah' yang harus kita perbaiki.
Pertama, memvalidasi formulir dalam JavaScript pada dasarnya adalah tentang menemukan cara untuk memvalidasi data formulir di komputer klien, tepat sebelum mengirimkannya ke server web.
Ada dua fungsi utama validasi formulir.
Validasi Dasar — Di sini, formulir harus diperiksa untuk memastikan data dimasukkan ke setiap bidang formulir yang memerlukannya. Contohnya adalah Anda memasukkan nama pengguna Anda ke dalam formulir pendaftaran.
Namun pada Validasi Format Data yang kedua, data yang dimasukkan harus diperiksa kebenaran bentuk dan nilainya. Contohnya adalah Anda mencoba mendaftar akun Spotify dan nama pengguna Anda tidak boleh lebih dari enam karakter, yang mana harus menyertakan satu karakter huruf besar dan simbol. Hal ini memerlukan lebih banyak logika untuk menguji kebenaran data.
Kami akan sampai pada solusi kami menggunakan langkah-langkah sederhana ini;
- Menggunakan perintah cepat untuk menerima detail pengguna
- Menggunakan objek untuk menyimpan detail pengguna
- Memvalidasi detail pengguna
LANGKAH 1 (MENDORONG NAMA PENGGUNA)
Saya asumsikan Anda sudah memasukkan tag ‹script› ke dalam file 'index.html' untuk menautkan file HTML ke file 'index.js' Anda.
Jadi langkah pertama adalah mengeluarkan perintah prompt di file JS Anda. Tujuannya adalah untuk membuat pop-up yang meminta pengguna memasukkan detailnya.
Anda dapat membuat perintah prompt untuk Nama Pengguna dengan memasukkan;
Biarkan nama pengguna =Prompt (“Masukkan Nama Pengguna Anda”)
Catatan [Anda dapat memeriksa apakah kode Anda berjalan dengan memasukkan console.log (nama pengguna)]
LANGKAH 2 (VALIDASI NAMA PENGGUNA)
Setelah memasukkan prompt dan memeriksa apakah kode Anda berjalan dengan benar, Anda sekarang dapat melanjutkan untuk memvalidasi Nama Pengguna. Kriteria validasi ini adalah nama pengguna harus kurang dari 8 karakter. Nama pengguna apa pun yang melebihi jumlah karakter yang ditentukan akan membuat kode Anda salah.
Langkah pertama untuk melakukannya adalah dengan menulis deklarasi Fungsi sederhana.
Fungsi ValidateUsername (nama pengguna){
Jika (nama pengguna == null){
mengembalikan salah
}
Jika (nama pengguna.panjang›8){
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
Periksa kode Anda dengan:console.log(validateUsername(username))
LANGKAH 3 (MENDORONG DAN MEMVALIDASI SANDI)
Setelah meminta dan memvalidasi nama pengguna, selanjutnya adalah kata sandi karena kode Anda perlu disusun secara serial. Kata sandi tidak boleh kurang dari 7 digit.
Sekarang, seperti inilah tampilan kode Anda; ('//** ' adalah komentar yang dimaksudkan untuk memandu Anda)
Biarkan nama pengguna =Prompt (“Masukkan Nama Pengguna Anda”) //**permintaan detail
validateUsername(nama pengguna) //**validasi
Biarkan kata sandi =Prompt (“Masukkan Kata Sandi Anda”) //*perintah kata sandi
validasiPassword (kata sandi). //**validasi
Fungsi Validasi Nama Pengguna(nama pengguna){
Jika (nama pengguna == null){
mengembalikan salah
}
Jika (nama pengguna.panjang›8){
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//*Fungsi Validasi Nama Pengguna
Fungsi ValidatePassword(kata sandi){
Jika (kata sandi == null) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
Jika (panjang kata sandi ‹7) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//*Fungsi validasi kata sandi
LANGKAH 4 (MEMBUAT PERINGATAN KESALAHAN/KESUKSESAN)
Apa yang terjadi jika pengguna memasukkan kata sandi atau nama pengguna yang berada di bawah kriteria yang Anda tetapkan? Meskipun pasti akan terbaca salah di konsol, Anda ingin pengguna mendapatkan peringatan kesalahan dan pesan yang meminta mereka memasukkan detail yang benar. Anda dapat mencapai ini dengan menambahkan "While Loop" ke kode Anda.
Catatan singkat:Dalam JavaScript, Loop digunakan untuk melakukan tugas berulang berdasarkan suatu kondisi.
Sementara (Validasi nama pengguna (nama pengguna) ==false){
}
username=Prompt (“Nama Pengguna tidak valid. Silakan masukkan kembali Nama Pengguna Anda”)
Seperti inilah tampilan kode Anda:
Sementara (Validasi nama pengguna (nama pengguna) ==false){
}
username=Prompt (“Nama pengguna tidak valid. Silakan masukkan kembali Nama Pengguna Anda”) //**prompt kesalahan untuk nama pengguna
Sementara (Validasi kata sandi (password) ==false){
}
password=Prompt (“Kata sandi tidak valid. Silakan masukkan kembali kata sandi Anda”) //**perintah kesalahan untuk kata sandi
Biarkan nama pengguna =Prompt (“Masukkan Nama Pengguna Anda”) //**perintah entri nama pengguna
Biarkan kata sandi =Prompt (“Masukkan Kata Sandi Anda”) //**perintah memasukkan kata sandi.
Fungsi Validasi Nama Pengguna(nama pengguna){
Jika (nama pengguna == null){
mengembalikan salah
}
Jika (nama pengguna.panjang›8){
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//*Fungsi Validasi Nama Pengguna
Fungsi ValidatePassword(kata sandi){
Jika (kata sandi == null) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
Jika (panjang kata sandi ‹7) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//**fungsi validasi kata sandi
Untuk mendapatkan pop up sukses di akhir eksekusi, Anda dapat memasukkan kode peringatan
alert(“Anda sudah masuk”)
Seperti inilah tampilan kode Anda;
Sementara (Validasi nama pengguna (nama pengguna) ==false){
}
username=Prompt (“Nama pengguna tidak valid. Silakan masukkan kembali Nama Pengguna Anda”) //**prompt kesalahan untuk nama pengguna
Sementara (Validasi kata sandi (password) ==false){
}
password=Prompt (“Kata sandi tidak valid. Silakan masukkan kembali kata sandi Anda”) //**perintah kesalahan untuk kata sandi
Biarkan nama pengguna =Prompt (“Masukkan Nama Pengguna Anda”) //**perintah entri nama pengguna
Biarkan kata sandi =Prompt (“Masukkan Kata Sandi Anda”) //**perintah memasukkan kata sandi.
alert(“Anda sudah masuk”) //**Alert pop up
Fungsi Validasi Nama Pengguna(nama pengguna){
Jika (nama pengguna == null){
mengembalikan salah
}
Jika (nama pengguna.panjang›8){
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//*Fungsi Validasi Nama Pengguna
Fungsi ValidatePassword(kata sandi){
Jika (kata sandi == null) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
Jika (panjang kata sandi ‹7) {
mengembalikan salah
}lainnya{
mengembalikan nilai benar
}
//**fungsi validasi kata sandi
Di sana! Formulir masuk Anda sudah divalidasi dan berjalan dengan lancar. Jika Anda menemukan kesalahan atau Anda punya saran, silakan berikan komentar. Terima kasih!
