文字框失去焦點即刻進行表單驗證程式碼例項

antzone發表於2017-04-01

大家可能都見過這樣的表單驗證效果，當填寫完當前文字框焦點離開後會立馬進行表單驗證。

下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章