輸入框前面帶有表單驗證提示的功能

antzone發表於2019-05-24

表單驗證的表現方式有各種各樣，比如表單元素後面會跟著錯誤提示。

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

程式碼實力如下：

[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值不能為空";  
    $("email").focus();  
    return false;  
  }  
          
  if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {  
    $("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";  
    $("email").focus();  
    return false;  
  }  
          
  if(password == "") {  
    $("passwordinfo").innerHTML = "密碼不能為空";  
    $("password").focus();  
    return false;  
  }  
          
  if(password.length < 6) {  
    $("passwordinfo").innerHTML = "密碼長度必須大於或者等於6";  
    $("password").focus();  
    return false;  
  }  
          
  if(repassword != password) {  
    $("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";  
    $("repassword").focus();  
    return false;  
  }  
          
  if(name == "") {  
    $("nameinfo").innerHTML = "姓名不能為空";  
    $("name").focus();  
    return false;  
  }  
          
  for(var i = 0; i < name.length; i++) {  
    var j = name.subString(i , i+1);  
    if(isNaN(j) == false) {  
      $("nameinfo").innerHTML = '姓名中不能包含數字';  
      $("name").focus();  
      return false;  
    }  
  }  
}  
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){return check()}
}
</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 id="bt" type="submit" value="註冊" /></div>
</form>
</body>
</html>

如果表單元素值不滿足要求，則會彈出提示框，下面簡單介紹一下需要注意的一些問題。

if語句中都有一個return false，這是為了跳出函式的執行，並且能夠阻止按鈕的預設動作，否則的話依然會提交表單。

相關文章