Artikel ini menjelaskan metode JS untuk verifikasi formulir. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
1. Kode verifikasi bentuk tradisional
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Verifikasi formulir </iteme>
<type skrip = "Teks/JavaScript">
fungsi $ (id) {
return document.getElementById (id);
}
function check () {
var email = $ ("email"). nilai;
var password = $ ("kata sandi"). nilai;
var repassword = $ ("repassword"). nilai;
var name = $ ("name"). Nilai;
if (email == "") {
peringatan ("Nilai email tidak bisa kosong");
$ ("email"). focus ();
mengembalikan false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
Peringatan ("Format kotak surat salah, harus menyertakan @ dan.");
$ ("email"). focus ();
mengembalikan false;
}
if (password == "") {
peringatan ("Kata sandi tidak bisa kosong");
$ ("kata sandi"). focus ();
mengembalikan false;
}
if (password.length <6) {
peringatan ("Panjang kata sandi harus lebih besar dari atau sama dengan 6");
$ ("kata sandi"). focus ();
mengembalikan false;
}
if (repassword! = kata sandi) {
peringatan ("Kata sandi yang dimasukkan dua kali tidak konsisten");
$ ("repassword"). focus ();
mengembalikan false;
}
if (name == "") {
peringatan ("Nama tidak bisa kosong");
$ ("name"). focus ();
mengembalikan false;
}
untuk (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
peringatan ('Nama tidak dapat berisi angka');
$ ("name"). focus ();
mengembalikan false;
}
}
}
</script>
</head>
<body>
<Form name = "LOGIN_FORM" METODE = "POST" ONSUBMIT = "Return check ()">
<div>
Email: <input type = "text" name = "email" id = "email"/>
</div>
<div>
Kata sandi: <input type = "password" name = "password" id = "password" />
</div>
<div>
Masukkan kembali kata sandi: <input type = "password" name = "repassword" id = "repassword" />
</div>
<div>
Nama: <input type = "text" name = "name" id = "name" />
</div>
<div>
<input type = "kirim" value = "register" />
</div>
</form>
</body>
</html>
2. Verifikasi formulir dengan informasi cepat di belakang kotak input
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Verifikasi formulir </iteme>
<type skrip = "Teks/JavaScript">
fungsi $ (id) {
return document.getElementById (id);
}
function check () {
var email = $ ("email"). nilai;
var password = $ ("kata sandi"). nilai;
var repassword = $ ("repassword"). nilai;
var name = $ ("name"). Nilai;
$ ("EmailInfo"). INNERHTML = "";
$ ("PasswordInfo"). InnerHtml = "";
$ ("repasswordinfo"). innerHtml = "";
$ ("nameInfo"). innerhtml = "";
if (email == "") {
$ ("EmailInfo"). INNERHTML = "Nilai email tidak bisa kosong";
$ ("email"). focus ();
mengembalikan false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). INNERHTML = "Format kotak surat salah, harus menyertakan @ dan.";
$ ("email"). focus ();
mengembalikan false;
}
if (password == "") {
$ ("PasswordInfo"). InnerHtml = "Password tidak bisa kosong";
$ ("kata sandi"). focus ();
mengembalikan false;
}
if (password.length <6) {
$ ("PasswordInfo"). InnerHTML = "Panjang kata sandi harus lebih besar dari atau sama dengan 6";
$ ("kata sandi"). focus ();
mengembalikan false;
}
if (repassword! = kata sandi) {
$ ("RepasswordInfo"). InnerHtml = "Kata sandi yang dimasukkan dua kali tidak konsisten";
$ ("repassword"). focus ();
mengembalikan false;
}
if (name == "") {
$ ("nameInfo"). innerhtml = "Nama tidak bisa kosong";
$ ("name"). focus ();
mengembalikan false;
}
untuk (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Nama tidak dapat berisi angka';
$ ("name"). focus ();
mengembalikan false;
}
}
}
</script>
</head>
<body>
<Form name = "LOGIN_FORM" METODE = "POST" ONSUBMIT = "Return check ()">
<div>
Email: <input type = "text" name = "email" id = "email"/> <span id = "emailInfo"> </span>
</div>
<div>
Kata sandi: <input type = "password" name = "password" id = "password" /> <span id = "passwordInfo"> </span>
</div>
<div>
Masukkan kembali kata sandi: <input type = "password" name = "repassword" id = "repassword" /> <span id = "repasswordinfo"> </span>
</div>
<div>
Nama: <input type = "text" name = "name" id = "name" /> <span id = "nameInfo"> </span>
</div>
<div>
<input type = "kirim" value = "register" />
</div>
</form>
</body>
</html>
Rendering adalah sebagai berikut:
3. Memicu fungsi cek saat kotak input kehilangan fokus
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Verifikasi formulir </iteme>
<type skrip = "Teks/JavaScript">
fungsi $ (id) {
return document.getElementById (id);
}
function check () {
var email = $ ("email"). nilai;
var password = $ ("kata sandi"). nilai;
var repassword = $ ("repassword"). nilai;
var name = $ ("name"). Nilai;
$ ("EmailInfo"). INNERHTML = "";
$ ("PasswordInfo"). InnerHtml = "";
$ ("repasswordinfo"). innerHtml = "";
$ ("nameInfo"). innerhtml = "";
if (email == "") {
$ ("EmailInfo"). INNERHTML = "Nilai email tidak bisa kosong";
mengembalikan false;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("EmailInfo"). INNERHTML = "Format kotak surat salah, harus menyertakan @ dan.";
mengembalikan false;
}
if (password == "") {
$ ("PasswordInfo"). InnerHtml = "Password tidak bisa kosong";
mengembalikan false;
}
if (password.length <6) {
$ ("PasswordInfo"). InnerHTML = "Panjang kata sandi harus lebih besar dari atau sama dengan 6";
mengembalikan false;
}
if (repassword! = kata sandi) {
$ ("RepasswordInfo"). InnerHtml = "Kata sandi yang dimasukkan dua kali tidak konsisten";
mengembalikan false;
}
if (name == "") {
$ ("nameInfo"). innerhtml = "Nama tidak bisa kosong";
mengembalikan false;
}
untuk (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Nama tidak dapat berisi angka';
mengembalikan false;
}
}
}
function checkemail () {// periksa email
$ ('emailInfo'). innerHtml = "";
var email = $ ('email'). nilai;
if (email == "") {
$ ('emailInfo'). innerHtml = "Nilai email tidak bisa kosong";
mengembalikan false;
}
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerHtml = "Email harus berisi @ dan.";
mengembalikan false;
}
}
fungsi checkpassword () {// periksa kata sandi
$ ('passwordInfo'). innerHtml = "";
var password = $ ('password'). Nilai;
if (password == "") {
$ ("PasswordInfo"). InnerHtml = "Password tidak bisa kosong";
mengembalikan false;
}
if (password.length <6) {
$ ("PasswordInfo"). InnerHTML = "Panjang kata sandi harus lebih besar dari atau sama dengan 6";
mengembalikan false;
}
}
Function CheckRepassWord () {// Periksa kata sandi yang dimasukkan kembali
$ ('repassword'). innerHtml = "";
var repassword = $ ('repassword'). nilai;
if (repassword! = kata sandi) {
$ ("RepasswordInfo"). InnerHtml = "Kata sandi yang dimasukkan dua kali tidak konsisten";
mengembalikan false;
}
}
function checkName () {// periksa nama
$ ('nameInfo'). innerHtml = "";
var name = $ ('name'). Nilai;
if (name == "") {
$ ("nameInfo"). innerhtml = "Nama tidak bisa kosong";
mengembalikan false;
}
untuk (var i = 0; i <name.length; i ++) {
var j = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerhtml = 'Nama tidak dapat berisi angka';
mengembalikan false;
}
}
}
</script>
</head>
<body>
<Form name = "LOGIN_FORM" METODE = "POST" ONSUBMIT = "Return check ()">
<div>
Email: <input type = "text" name = "email" id = "email" oNblur = "checkemail ();"/> <span id = "emailInfo"> </span>
</div>
<div>
Kata sandi: <input type = "password" name = "password" id = "password" onsblur = "checkPassword ();"/> <span id = "passwordInfo"> </span>
</div>
<div>
Masukkan kembali kata sandi: <input type = "password" name = "repassword" id = "repassword" onsblur = "checkRepassword ();"/> <span id = "repasswordinfo"> </span>
</div>
<div>
Nama: <input type = "text" name = "name" id = "name" onblur = "checkName ();"/> <span id = "nameInfo"> </span>
</div>
<div>
<input type = "kirim" value = "register" />
</div>
</form>
</body>
</html>
Rendering adalah sebagai berikut:
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.