JavaScript ： 5. 表單驗證

 今天學習的內容是表單驗證，這個要多普遍就有多普遍，基本上所有的網站都要用到這個。注冊、登錄、評論等等，只要是想往服務器POST信息的，基本上都要用到 form ，好了，接著看例子。

<form action="#" id="test-form" onsubmit="return checkForm()">
  <div><span class="text">username:</span><input type="text" name="username" id="username"></div>
  <div><span class="text">password:</span><input type="text" name="password" id="password"></div>
  <div><span class="text">re-password:</span><input type="text" name="password2" id="password2"></div>
  <div id="error" class="text"></div>
  <button type="submit" name="submit">Submit</button>
  <button type="reset" name="reset">Reset</button>
</form>

用戶名，密碼是注冊登錄界面最基本的元素，還有好多基本的元素就不一一寫出來了，那些東西都是練習得多了，自然就會了。關鍵還是在代碼量。

實現功能：

1. 用戶名要求數字，字母3-10位；
2. 密碼要求6-12位；
3. 兩次密碼輸入要一致；

第一個要點要使用到正則表達式來匹配

• 用戶名匹配用 /^[0-9a-zA-Z]{3,10}$/
• 密碼匹配用到 /^.{6-12}$/ ；

第二個要點就是表單提交的方法

• 一是使用了表單的 submit() 方法；
  document.getElementById("formId").submit()
• 二是瀏覽器默認提交方法 <b utton type="submit"> ，使用 submit 類型的 button 按鈕來提交，這種方法需要在 form 中添加 onsubmit 屬性值。

主要內容就是這些，那么接下來就是代碼實現了。

function checkForm() {
  var form = document.getElementById('test-form');
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  var rePassword = document.getElementById('password2').value;
  var error = document.getElementById('error');
  // 不允許為空
  if (username.length <= 0 || password.length <= 0 || password2 <= 0){
    error.innerHTML = "not allow empty";
    return false;
  }
  // 用戶名為字符數字，3到10位
  var reg_username = /^[0-9a-zA-Z]{3,10}$/;
  if(!reg_username.test(username)){
    error.innerHTML = "username is not valid, please retry";  
    return false;
  }
  // 密碼需為6到12位
  var reg_password = /^.{6,12}$/;
  if(!reg_password.test(password)){
    error.innerHTML = "password is not valid, please retry";
    return false;
  }
  // 兩次輸入密碼需一致
  if (password != rePassword) {
    error.innerHTML = "inconsistent password";
    return false;
  }
  error.innerHTML = "Success";
  alert("Access Success");
  return true;
}

直接 點擊這里 ，查看效果。