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: 表单验证 <br> <br> fungsi $(id) { <br> pulangkan document.getElementById(id); <br> } <br> <br> semak fungsi() { <br> var email = $("email").value; <br> var password = $("kata laluan").value; <br> var kata laluan semula = $("kata laluan semula").value; <br> var name = $("nama").value; <br> <br> if(emel == "") { <br> alert("Emel值不能为空"); <br> $("e-mel").fokus(); <br> kembali palsu; <br> } <br> <br> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br> alert("邮箱格式不正确,必须包含@和."); <br> $("e-mel").fokus(); <br> kembali palsu; <br> } <br> <br> if(kata laluan == "") { <br> alert("密码不能为空"); <br> $("kata laluan").fokus(); <br> kembali palsu; <br> } <br> <br> if(kata laluan.panjang < 6) { <br /> alert("密码长度必须大于或者等于6"); <br /> $("kata laluan").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> if(kata laluan semula != kata laluan) { <br /> alert("两次输入的密码不一致"); <br /> $("kata laluan semula").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> jika(nama == "") { <br /> alert("姓名不能为空"); <br /> $("nama").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> untuk(var i = 0; i < nama.panjang; i ) { <br /> var j = name.subString(i , i 1); <br /> if(isNaN(j) == palsu) { <br /> alert('姓名中不能包含数字'); <br /> $("nama").fokus(); <br /> kembali palsu; <br /> } <br /> } <br /> } <br /> </skrip> <br> </head> <br> <badan> <br><form name="login_form" method="post" onsubmit="return check()"> <div> <br> E-mel:<input type="text" name="email" id="email"/> <div> <br> Kata laluan:<input type="password" name="password" id="password" /> </div> <div> <br> Masukkan semula kata laluan:<input type="password" name="repassword" id="repassword" /> </div> <div> <br> Nama:<input type="text" name="name" id="name" /> <br> </div> <div> <br> <jenis input="submit" value="Daftar" /> </div> </form> </body> </html><br><br> <br>2. Pengesahan borang dengan maklumat segera di belakang kotak input<br> <br><br><br><br><br>Salin kod<br><br><br> Kod adalah seperti berikut:</div> <div class="codebody" id="code2574"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> <html xmlns="http://www.w3.org/1999/xhtml"> <br> <kepala> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br> <tajuk>表单验证</title> <br> <script type="text/javascript"> <br> <br> fungsi $(id) { <br> pulangkan document.getElementById(id); <br> } <br> <br> semak fungsi() { <br> var email = $("email").value; <br> var password = $("kata laluan").value; <br> var kata laluan semula = $("kata laluan semula").value; <br> var name = $("nama").value; <br> <br> $("emailinfo").innerHTML = ""; <br> $("info kata laluan").innerHTML = ""; <br> $("repasswordinfo").innerHTML = ""; <br> $("nameinfo").innerHTML = ""; <br> <br> if(emel == "") { <br> $("emailinfo").innerHTML = "E-mel值不能为空"; <br> $("e-mel").fokus(); <br> kembali palsu; <br> } <br> <br> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br> $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; <br> $("e-mel").fokus(); <br> kembali palsu; <br> } <br> <br> if(kata laluan == "") { <br> $("info kata laluan").innerHTML = "密码不能为空"; <br> $("kata laluan").fokus(); <br> kembali palsu; <br> } <br> <br> if(kata laluan.panjang < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> $("kata laluan").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> if(kata laluan semula != kata laluan) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> $("kata laluan semula").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> jika(nama == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> $("nama").fokus(); <br /> kembali palsu; <br /> } <br /> <br /> untuk(var i = 0; i < nama.panjang; i ) { <br /> var j = name.subString(i , i 1); <br /> if(isNaN(j) == palsu) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> $("nama").fokus(); <br /> kembali palsu; <br /> } <br /> } <br /> } <br /> </skrip> <br> </head> <br> <badan> <br> <form name="login_form" method="post" onsubmit="return check()"> <br> <div> <br> E-mel:<input type="text" name="email" id="email"/><span id="emailinfo"></span> <br> </div> <br> <div> <br> 密码:<input type="password" name="password" id="password" /><span id="passwordinfo"></span> <br> </div> <br> <div> <br> 重输密码:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span> <br> </div> <br> <div> <br> 姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span> <br> </div> <br> <div> <br> <input type="submit" value="注册" /> <br> </div> <br> </form> <br> </badan> <br> </html></div> <p>效果图如下所示：</p> <p><img src="http://files.jb51.net/file_images/article/201502/2015210102232600.gif?201511010237" alt=""></p> <p>3. 在输入框失去焦点时触发校验函数<br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="80548" class="copybut" id="copybut80548" onclick="doCopy('code80548')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code80548"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> <html xmlns="http://www.w3.org/1999/xhtml"> <br> <kepala> <br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br> <tajuk>表单验证</title> <br> <script type="text/javascript"> <br> fungsi $(id) { <br> pulangkan document.getElementById(id); <br> } <br> <br> semak fungsi() { <br> var email = $("email").value; <br> var password = $("kata laluan").value; <br> var kata laluan semula = $("kata laluan semula").value; <br> var name = $("nama").value; <br> <br> $("emailinfo").innerHTML = ""; <br> $("info kata laluan").innerHTML = ""; <br> $("repasswordinfo").innerHTML = ""; <br> $("nameinfo").innerHTML = ""; <br> <br> if(emel == "") { <br> $("emailinfo").innerHTML = "E-mel值不能为空"; <br> kembali palsu; <br> } <br> <br> if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { <br> $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; <br> kembali palsu; <br> } <br> <br> if(kata laluan == "") { <br> $("info kata laluan").innerHTML = "密码不能为空"; <br> kembali palsu; <br> } <br> <br> if(kata laluan.panjang < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> kembali palsu; <br /> } <br /> <br /> if(kata laluan semula != kata laluan) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> kembali palsu; <br /> } <br /> <br /> jika(nama == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> kembali palsu; <br /> } <br /> <br /> untuk(var i = 0; i < nama.panjang; i ) { <br /> var j = name.subString(i , i 1); <br /> if(isNaN(j) == palsu) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> kembali palsu; <br /> } <br /> } <br /> } <br /> <br /> function checkEmail() { //校验Emel <br /> $('emailinfo').innerHTML = ""; <br /> var email = $('email').value; <br /> if(email == "") { <br /> $('emailinfo').innerHTML = "Email值不能为空"; <br /> return false; <br /> } <br /> <br /> if(email.indexOf('@') == -1 || email.indexOf('.') == -1) { <br /> $('emailinfo').innerHTML = "Email必须包含@和."; <br /> return false; <br /> } <br /> } <br /> <br /> function checkPassword() { //校验密码 <br /> $('passwordinfo').innerHTML = ""; <br /> var password = $('password').value; <br /> if(password == "") { <br /> $("passwordinfo").innerHTML = "密码不能为空"; <br /> return false; <br /> } <br /> <br /> if(password.length < 6) { <br /> $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; <br /> return false; <br /> } <br /> } <br /> <br /> function checkRepassword() { //校验重新输入的密码 <br /> $('repassword').innerHTML = ""; <br /> var repassword = $('repassword').value; <br /> if(repassword != password) { <br /> $("repasswordinfo").innerHTML = "两次输入的密码不一致"; <br /> return false; <br /> } <br /> } <br /> <br /> function checkName() { //校验姓名 <br /> $('nameinfo').innerHTML = ""; <br /> var name = $('name').value; <br /> if(name == "") { <br /> $("nameinfo").innerHTML = "姓名不能为空"; <br /> return false; <br /> } <br /> <br /> for(var i = 0; i < name.length; i++) { <br /> var j = name.subString(i , i+1); <br /> if(isNaN(j) == false) { <br /> $("nameinfo").innerHTML = '姓名中不能包含数字'; <br /> return false; <br /> } <br /> } <br /> } <br /> Email: 密码: Masukkan semula kata laluan: 🎜 > Nama:
