js contoh pengesahan borang kemahiran analisis_javascript

Contoh dalam artikel ini menerangkan kaedah pengesahan borang menggunakan js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

1. Kod pengesahan borang tradisional

Salin kod Kod adalah seperti berikut: 表单验证 fungsi $(id) { pulangkan document.getElementById(id); } semak fungsi() { var email = $("email").value; var password = $("kata laluan").value; var kata laluan semula = $("kata laluan semula").value; var name = $("nama").value; if(emel == "") { alert("Emel值不能为空"); $("e-mel").fokus(); kembali palsu; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { alert("邮箱格式不正确,必须包含@和."); $("e-mel").fokus(); kembali palsu; } if(kata laluan == "") { alert("密码不能为空"); $("kata laluan").fokus(); kembali palsu; } if(kata laluan.panjang alert("密码长度必须大于或者等于6"); $("kata laluan").fokus(); kembali palsu; } if(kata laluan semula != kata laluan) { alert("两次输入的密码不一致"); $("kata laluan semula").fokus(); kembali palsu; } jika(nama == "") { alert("姓名不能为空"); $("nama").fokus(); kembali palsu; } untuk(var i = 0; i var j = name.subString(i , i 1); if(isNaN(j) == palsu) { alert('姓名中不能包含数字'); $("nama").fokus(); kembali palsu; } } } E-mel: Kata laluan: Masukkan semula kata laluan: Nama:

2. Pengesahan borang dengan maklumat segera di belakang kotak input

Salin kod

Kod adalah seperti berikut: 表单验证 fungsi $(id) { pulangkan document.getElementById(id); } semak fungsi() { var email = $("email").value; var password = $("kata laluan").value; var kata laluan semula = $("kata laluan semula").value; var name = $("nama").value; $("emailinfo").innerHTML = ""; $("info kata laluan").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(emel == "") { $("emailinfo").innerHTML = "E-mel值不能为空"; $("e-mel").fokus(); kembali palsu; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; $("e-mel").fokus(); kembali palsu; } if(kata laluan == "") { $("info kata laluan").innerHTML = "密码不能为空"; $("kata laluan").fokus(); kembali palsu; } if(kata laluan.panjang $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; $("kata laluan").fokus(); kembali palsu; } if(kata laluan semula != kata laluan) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; $("kata laluan semula").fokus(); kembali palsu; } jika(nama == "") { $("nameinfo").innerHTML = "姓名不能为空"; $("nama").fokus(); kembali palsu; } untuk(var i = 0; i var j = name.subString(i , i 1); if(isNaN(j) == palsu) { $("nameinfo").innerHTML = '姓名中不能包含数字'; $("nama").fokus(); kembali palsu; } } } E-mel: 密码: 重输密码: 姓名： 效果图如下所示：

3. 在输入框失去焦点时触发校验函数

复制代码 代码如下: 表单验证 fungsi $(id) { pulangkan document.getElementById(id); } semak fungsi() { var email = $("email").value; var password = $("kata laluan").value; var kata laluan semula = $("kata laluan semula").value; var name = $("nama").value; $("emailinfo").innerHTML = ""; $("info kata laluan").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(emel == "") { $("emailinfo").innerHTML = "E-mel值不能为空"; kembali palsu; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; kembali palsu; } if(kata laluan == "") { $("info kata laluan").innerHTML = "密码不能为空"; kembali palsu; } if(kata laluan.panjang $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; kembali palsu; } if(kata laluan semula != kata laluan) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; kembali palsu; } jika(nama == "") { $("nameinfo").innerHTML = "姓名不能为空"; kembali palsu; } untuk(var i = 0; i var j = name.subString(i , i 1); if(isNaN(j) == palsu) { $("nameinfo").innerHTML = '姓名中不能包含数字'; kembali palsu; } } } function checkEmail() { //校验Emel $('emailinfo').innerHTML = ""; var email = $('email').value; if(email == "") { $('emailinfo').innerHTML = "Email值不能为空"; return false; } if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { $('emailinfo').innerHTML = "Email必须包含@和."; return false; } } function checkPassword() { //校验密码 $('passwordinfo').innerHTML = ""; var password = $('password').value; if(password == "") { $("passwordinfo").innerHTML = "密码不能为空"; return false; } if(password.length $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; return false; } } function checkRepassword() { //校验重新输入的密码 $('repassword').innerHTML = ""; var repassword = $('repassword').value; if(repassword != password) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; return false; } } function checkName() { //校验姓名 $('nameinfo').innerHTML = ""; var name = $('name').value; if(name == "") { $("nameinfo").innerHTML = "姓名不能为空"; return false; } for(var i = 0; i var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; return false; } } } Email: 密码: Masukkan semula kata laluan: 🎜 > Nama:

Rendering adalah seperti berikut:

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

js contoh pengesahan borang kemahiran analisis_javascript

Artikel berkaitan