表單基本驗證技術：為什麼要進行表單驗證？：減輕伺服器壓力

保證輸入資料符合要求

常用的表單驗證：日期 格式

表單元素是否為空

使用者名稱和密碼

Email地址

身份證號

常用的表單選擇器：input：匹配所有input，textarea，select和button元素

text：匹配所有單行文字框

password：匹配所有密碼框

radio：匹配所有單選按鈕

checkbox：匹配所有複選框

submit：提交按鈕

image：影象域

reset：重置按鈕

button：所有按鈕

file：檔案域

hidden：匹配所有不可見 元素，或者type為hidden的元素

屬性過濾選擇器：enabled：匹配所有可用元素

disabled：匹配 所有不可用元素

checked：匹配所有被選中元素

selected：匹配所以option元素

非空驗證：

if (mail == "") {
     alert("Email不能為空");
     return

字串查詢：indexOf()：查詢某個指定的字串值在字串中首次出現的位置

例項展示

$("form").submit(function(){
    var mail = $("#myform :text").val();
    if (mail=="") {//檢測Email是否為空
        alert("Email不能為空");
        return false;
    }
    if (mail.indexOf("@") == -1) {
        alert("Email格式不正確\n必須包含@");
        return false;
    }
    if (mail.indexOf(".") == -1) {
        alert("Email格式不正確\n必須包含.");
        return false;
    }
    return true;
})

長度驗證

例項展示：

if(pwd.length<6){
    alert("密碼必須等於或大於6個字元");
    return false;
}

判斷字串是否有數字：使用for迴圈和substring()方法依次擷取單個字元，再判斷每個字元是否是數字

例項展示

for (var i = 0; i < user.length; i++) {
    var j = user.substring(i, i + 1);
    if (isNaN(j) == false) {
        alert("姓名中不能包含數字");
        return false;
    }
}

var pwd = $("#pwd").val();
if (pwd == "") {
       alert("密碼不能為空");
       return false;
}
if (pwd.length < 6) {
       alert("密碼必須等於或大於6個字元");
       return false;
}
var repwd = $("#repwd").val();
if (pwd != repwd) {
      alert("兩次輸入的密碼不一致");
      return false;

r user = $("#user").val();
      if (user == "") {
         alert("姓名不能為空");
         return false;
}
for (var i = 0; i < user.length; i++) {
         var j = user.substring(i, i + 1);
          if (isNaN(j) == false) {   
    alert("姓名中不能包含數字");
               return false;
          }
}

表單驗證事件和方法

正則表示式

使用HTML5方式驗證表單