文本框失去焦点即刻进行表单验证代码实例

2023-12-04 13:40:11 前端笔记 193

大家可能都见过这样的表单验证效果，当填写完当前文本框焦点离开后会立马进行表单验证。

下面就通过代码实例介绍一下如何实现此功能。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<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>