點擊提交按鈕實現彈出警告框表單驗證效果

2023-12-04 13:40:09 前端筆記 157

本章節介紹一下如何實現基本的表單驗證功能。

最為常見的一種方式就是當點擊提交按鈕的時候，如果有表單的內容填寫不符合規范那么就會彈出警告框。

代碼實例:

<!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;  
          
  if(email == "") {  
    alert("Email值不能為空");  
    $("email").focus();  
    return false;  
  }  
          
  if(email.indexOf("@") == -1 || email.indexOf(".") == -1){  
    alert("郵箱格式不正確,必須包含@和.");  
    $("email").focus();  
    return false;  
  }  
          
  if(password == ""){  
    alert("密碼不能為空");  
    $("password").focus();  
    return false;  
  }  
          
  if(password.length < 6) {  
    alert("密碼長度必須大于或者等于6");  
    $("password").focus();  
    return false;  
  }  
          
  if(repassword != password) {  
    alert("兩次輸入的密碼不一致");  
    $("repassword").focus();  
    return false;  
  }  
          
  if(name == "") {  
    alert("姓名不能為空");  
    $("name").focus();  
    return false;  
  }  
          
  for(var i = 0; i < name.length; i++) {  
    var j = name.subString(i , i+1);  
    if(isNaN(j) == false) {  
      alert('姓名中不能包含數字');  
      $("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"/></div>
  <div>密碼:<input type="password" name="password" id="password"/></div>
  <div>重輸密碼:<input type="password" name="repassword" id="repassword"/></div>
  <div>姓名:<input type="text" name="name" id="name"/></div>
  <div><input id="bt" type="submit" value="注冊"/></div>
</form>
</body>
</html>

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

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

focus()方法則是為了使不符合要求的當前表單元素獲取焦點。

1.focus()方法可以參閱javascript password.focus()一章節。

2.return false可以參閱javascript return false的作用是什么一章節。

3.indexOf()方法可以參閱javascript String indexOf()一章節。

4.isNaN()方法可以參閱javascript isNaN()一章節。