使用jQuery快速高效製作網頁交互特效——09 第九章 表單驗證

1.     獲得表單元素值，這些值一般是String類型，包含數字、下劃線等；

2.     使用JavaScript的一些方法對獲取的String類型的數據進行判斷；

3.     當表單提交時，觸發onsubmit事件，對獲取的數據進行驗證；

●表單選擇器用於選取某些特定的表單元素，比如所有單選按鈕或隱藏的元素；

語法

描述

示例

:input

匹配所有input、textarea、select和button 元素

$("#myform  :input")選取表單中所有的input、select和button元素

:text

匹配所有單行文本框

$("#myform  :text")選取email 和姓名兩個input 元素

:password

匹配所有密碼框

$("#myform  :password" )選取所有<input type="password" />元素

:radio

匹配所有單項按鈕

$("#myform  :radio")選取<input type="radio" />元素

:checkbox

匹配所有覆選框

$(" #myform  :checkbox " )選取<input type="checkbox " />元素

:submit

匹配所有提交按鈕

$("#myform  :submit " )選取<input type="submit " />元素

:image

匹配所有圖像域

$("#myform  :image" )選取<input type=" image" />元素

:reset

匹配所有重置按鈕

$(" #myform  :reset " )選取<input type=" reset " />元素

:button

匹配所有按鈕

$("#myform  :button" )選取button 元素

:file

匹配所有文件域

$(" #myform  :file" )選取<input type=" file " />元素

:hidden

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

$("#myform  :hidden" )選取<input type="hidden " />、style="display: none"等元素

語法

描述

示例

:enabled

匹配所有可用元素

$(" #userform :enabled" )匹配form內部除編號輸入框外的所有元素

:disabled

匹配所有不可用元素

$(" #userform :disabled" )匹配被禁用的輸入框

:checked

匹配所有被選中元素（覆選框、單項按鈕、select 中的option）

$(" #userform :checked" )匹配選中的選項

:selected

匹配所有選中的option 元素

$(" #userform :selected" ) 匹配指定元素的選項

●使用String 對象驗證郵箱：不能為空，格式正確

●文本框內容的驗證： 密碼不能為空，不少於6個字元，姓名不能為空，不能有數字

●使用String 對象驗證郵箱：

   ●實現思路

　　1、 使用val( )方法獲取文本框的值

　　2、 使用indexOf( ) 來判斷字元串是否包含“@”和“.”

　　3、使用方法submit( )提交表單

　　4、根據返回值是true還是false來決定是否提交表單

eg：

  $(document).ready(function(){

      $("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 (mail == "") {           //檢測Email是否為空

     alert("Email不能為空");

     return false;

}

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

　　var str="this is JavaScript";

　　var selectFirst=str.indexOf("Java");  //返回8

　　var selectSecond=str.indexOf("Java",12);   //返回11

●文本框內容的驗證：

　　1、實現思路

　　2、使用String對象的length屬性驗證密碼的長度

　　3、驗證兩次輸入密碼是否一致

　　4、使用length屬性獲取文本長度，然後使用for迴圈和substring( )方法依次截斷單個字元，最後判斷每個字元是否是數字

●長度驗證：

　　if(pwd.length<6){     //length屬性可以獲取字元串長度

   　　   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;

    }

}

eg：註冊頁面的驗證

驗證密碼：

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;

         }

驗證賬號：

var 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;

                  }

              }

• ●表單驗證需要綜合運用元素的事件和方法

●為什麼需要正則表達式：簡潔的代碼、嚴謹的驗證文本框中的內容

 　　●一個簡單的表達式即可驗證郵箱

 　　var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

　　if(reg.test(email) ==false){ 

   　　 $email_prompt.html("電子郵件格式不正確,請重新輸入");

    　　return false;

　　}

●定義正則表達式：

　　★普通方式語法：

　　　　var reg=/表達式/附加參數

　　　　 ◆表達式：一個字元串代表了某種規則，其中可以使用某些特殊字母來代表特殊的規則；

　　　　 ◆附加參數：用來擴展表達式的含義，主要三個參數如下：

  　　　　   ☆g：代表可以進行全局匹配；

   　　　　  ☆i：代表不區分大小寫匹配；

   　　　　  ☆m：代表可以進行多行匹配；

     　　　　　　eg： var reg=/white/;

　　　　　　　　　　var reg=/white/g;

      ★構造函數語法：

　　　　var reg=new RegExp("表達式","附加參數")

 　　　　　　☆表達式可以是一個常量字元串，也可以是一個JavaScript變數；

●表達式的模式：

   ★簡單模式：通過普通字元串的組合來表達的模式（只能表示具體的匹配）；

      eg： var reg=/china/;

　　　　   var reg=/abc8/;

   ★複合模式：可以使用通配符表達更為抽象的規則模式；

        eg：var reg=/^\w+$/;

　　　　    var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

• ●RegExp對象的方法：

     　　　　　　　　　　　　 ★test()方法：用於檢測一個字元串是否匹配某個模式：

         　　　　　　　　　　　　　　　　 語法：正則表達式對象實例.test(字元串)；//如果字元串中有正則表達式匹配的文本返回true，否則返回false；

●RegExp對象的屬性：

    　　　　　　　　  ★global：用於返回正則表達式是否包含標誌g，它聲明瞭給定的正則表達式是否執行全局匹配，如果g被標誌返回true，否則返回false；

      　　　　　　　　★ignoreCase：屬性用於返回正則表達式是否包含標誌i，它聲明瞭給定的正則表達式是否執行忽略大小寫的匹配，如果被標誌返回true；

      　　　　　　　　★multiline：屬性用於返回正則表達式是否包含標誌m，它聲明瞭給定的正則表達式是否以多行模式執行模式匹配，被標誌返回true；

●String對象的方法：

      ★math（）：該方法可以在字元串內檢索指定的值，找到一個或多個正則表達式的匹配；類似於indexOf()，但indexOf()返回的時字元串的位置，不是指定的值

           語法：字元串對象.match(searchString或regexpObject);

                  //searchString：檢索的字元串的值；

                  //regexpObject：規定要匹配模式的RegExp對象；

      ★replace()：該方法用於在字元串中用一些字元串替換另一些字元，或替換一個與正則表達式匹配的子串；

            語法：字元串對象。replace(RegExp對象或字元串，“替換的字元串”)；//如果設置了全文檢索，則符合的會全部被替換，否則只替換一個；

      ★split()：該方法將字元串分割成一系列字串並通過一個數組將這一系列字串返回；

            語法：字元串對象.split(分割符，n);  //分割符可以是字元串，也可以是正則表達式，n為限制輸出數組的個數，可選項，若沒有則返回整個數組；

●正則表達式符號：

    　　　　　　　　 ★@ 前後的字元可以是數字、字母、或下劃線；

   　　　　　　　　  ★但是.之後的字元只能是字母；

●正則表達式的重覆字元：

●這則表達式中有：（）、[]、{}區別如下：

  ★（）是為了提取匹配的字元串，表達式中有幾個（）就有幾個相應的匹配字元串；

  ★[]是定義匹配的字元串，eg：[A-Za-z0-9]表示字元串要匹配英文字母和數字；

  ★{}是用來匹配長度，eg：\s{3}代表匹配三個空格；

●HTML5新增驗證屬性：

●validity屬性：