文本框失去焦点即刻进行表单验证代码实例
分类:实例代码
大家可能都见过这样的表单验证效果,当填写完当前文本框焦点离开后会立马进行表单验证。
下面就通过代码实例介绍一下如何实现此功能。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var password = $("password").value; var repassword = $("repassword").value; var name = $("name").value; $("emailinfo").innerHTML = ""; $("passwordinfo").innerHTML = ""; $("repasswordinfo").innerHTML = ""; $("nameinfo").innerHTML = ""; if(email == "") { $("emailinfo").innerHTML = "Email值不能为空"; return false; } if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和."; return false; } if(password == "") { $("passwordinfo").innerHTML = "密码不能为空"; return false; } if(password.length < 6) { $("passwordinfo").innerHTML = "密码长度必须大于或者等于6"; return false; } if(repassword != password) { $("repasswordinfo").innerHTML = "两次输入的密码不一致"; return false; } if(name == "") { $("nameinfo").innerHTML = "姓名不能为空"; return false; } for(var i = 0; i < name.length; i++) { var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; return false; } } } function checkEmail() { //校验Email $('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 < 6) { $("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 < name.length; i++) { var j = name.subString(i , i+1); if(isNaN(j) == false) { $("nameinfo").innerHTML = '姓名中不能包含数字'; return false; } } } window.onload=function(){ var email=document.getElementById("email"); var password=document.getElementById("password"); var repassword=document.getElementById("repassword"); var name=document.getElementById("name"); email.onblur=function(){checkEmail();} password.onblur=function(){checkPassword();} repassword.onblur=function(){checkRepassword()} name.onblur=function(){checkName();} } </script> </head> <body> <form name="login_form" method="post"> <div> Email:<input type="text" name="email" id="email"/> <span id="emailinfo"></span> </div> <div> 密码:<input type="password" name="password" id="password"/> <span id="passwordinfo"></span> </div> <div> 重输密码:<input type="password" name="repassword" id="repassword"/> <span id="repasswordinfo"></span> </div> <div> 姓名:<input type="text" name="name" id="name"/> <span id="nameinfo"></span> </div> <div><input type="submit" value="注册" /></div> </form> </body> </html>