JQuery製做網頁——第九章 表單驗證

一、  表單驗證：減輕服務器的壓力、保證輸入的數據符合要求；

二、  經常使用的表單驗證：日期格式、表單元素是否爲空、用戶名和密碼、E-mail地址、身份證號碼等；

三、  表單驗證的思路：

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 對象驗證郵箱：    ●實現思路 　　一、 使用val( )方法獲取文本框的值 　　二、 使用indexOf( ) 來判斷字符串是否包含「@」和「.」 　　三、使用方法submit( )提交表單 　　四、根據返回值是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
●文本框內容的驗證： 　　一、實現思路 　　二、使用String對象的length屬性驗證密碼的長度 　　三、驗證兩次輸入密碼是否一致 　　四、使用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;                   }               }

七、表單驗證事件和方法：

●表單驗證須要綜合運用元素的事件和方法 類別 名稱 描述 事件 onblur 失去焦點，當光標離開某個文本框時觸發 onfocus 得到焦點，當光標進入某個文本框時觸發 方法 blur() 從文本域中移開焦點 focus() 在文本域中設置焦點，即得到鼠標光標 select() 選取文本域中的內容，突出顯示輸入區域的內容

八、 正則表達式：是一個描述字符模式的對象，它是由一些特殊的符號組成的，和SQL Server中的通配符同樣，其組成的字符模式用來匹配各類表達式；

●爲何須要正則表達式：簡潔的代碼、嚴謹的驗證文本框中的內容  　　●一個簡單的表達式便可驗證郵箱  　　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對象：

●RegExp對象的方法：   方法 描述 exec 檢索字符中是正則表達式的區配，返回找到的值，並肯定其位置 test 檢索字符串中指定的值，返回true或false      　　　　　　　　　　　　 ★test()方法：用於檢測一個字符串是否匹配某個模式：          　　　　　　　　　　　　　　　　 語法：正則表達式對象實例.test(字符串)；//若是字符串中有正則表達式匹配的文本返回true，不然返回false；

●RegExp對象的屬性： 屬性 描述 global RegExp對象是否具備標誌g ignoreCase RegExp對象是否具備標誌i multiline RegExp對象是否具備標誌m     　　　　　　　　  ★global：用於返回正則表達式是否包含標誌g，它聲明瞭給定的正則表達式是否執行全局匹配，若是g被標誌返回true，不然返回false；       　　　　　　　　★ignoreCase：屬性用於返回正則表達式是否包含標誌i，它聲明瞭給定的正則表達式是否執行忽略大小寫的匹配，若是被標誌返回true；       　　　　　　　　★multiline：屬性用於返回正則表達式是否包含標誌m，它聲明瞭給定的正則表達式是否以多行模式執行模式匹配，被標誌返回true；

●String對象的方法： 方法 描述 match 找到一個或多個正則表達式的匹配 search 檢索與正則表達式相匹配的值 replace 替換與正則表達式匹配的字符串 split 把字符串分割爲字符串數組       ★math（）：該方法能夠在字符串內檢索指定的值，找到一個或多個正則表達式的匹配；相似於indexOf()，但indexOf()返回的時字符串的位置，不是指定的值            語法：字符串對象.match(searchString或regexpObject);                   //searchString：檢索的字符串的值；                   //regexpObject：規定要匹配模式的RegExp對象；       ★replace()：該方法用於在字符串中用一些字符串替換另外一些字符，或替換一個與正則表達式匹配的子串；             語法：字符串對象。replace(RegExp對象或字符串，「替換的字符串」)；//若是設置了全文檢索，則符合的會所有被替換，不然只替換一個；       ★split()：該方法將字符串分割成一系列字串並經過一個數組將這一系列字串返回；             語法：字符串對象.split(分割符，n);  //分割符能夠是字符串，也能夠是正則表達式，n爲限制輸出數組的個數，可選項，若沒有則返回整個數組；

●正則表達式符號： 符號 描述 /…/ 表明一個模式的開始和結束 ^ 匹配字符串的開始 $ 匹配字符串的結束 \s 任何空白字符 \S 任何非空白字符 \d 匹配一個數字字符，等價於[0-9] \D 除了數字以外的任何字符，等價於[^0-9] \w 匹配一個數字、下劃線或字母字符，等價於[A-Za-z0-9_] \W 任何非單字字符，等價於[^a-zA-z0-9_] . 除了換行符以外的任意字符     　　　　　　　　 ★@ 先後的字符能夠是數字、字母、或下劃線；    　　　　　　　　  ★可是.以後的字符只能是字母； 字符 描述 \ 將下一個字符標記爲一個特殊字符、或一個原義字符、或一個 向後引用、或一個八進制轉義符。例如，'n' 匹配字符 "n"。'\n' 匹配一個換行符。序列 '\\' 匹配 "\" 而 "\(" 則匹配 "("。 ^ 匹配輸入字符串的開始位置。若是設置了 RegExp 對象的 Multiline 屬性，^ 也匹配 '\n' 或 '\r' 以後的位置。 $ 匹配輸入字符串的結束位置。若是設置了RegExp 對象的 Multiline 屬性，$ 也匹配 '\n' 或 '\r' 以前的位置。 * 匹配前面的子表達式零次或屢次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等價於{0,}。 + 匹配前面的子表達式一次或屢次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等價於 {1,}。 ? 匹配前面的子表達式零次或一次。例如，"do(es)?" 能夠匹配 "do" 或 "does" 。? 等價於 {0,1}。 {n} n 是一個非負整數。匹配肯定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，可是能匹配 "food" 中的兩個 o。 {n,} n 是一個非負整數。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的全部 o。'o{1,}' 等價於 'o+'。'o{0,}' 則等價於 'o*'。 {n,m} m 和 n 均爲非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 將匹配 "fooooood" 中的前三個 o。'o{0,1}' 等價於 'o?'。請注意在逗號和兩個數之間不能有空格。 ? 當該字符緊跟在任何一個其餘限制符 (*, +, ?, {n}, {n,}, {n,m}) 後面時，匹配模式是非貪婪的。非貪婪模式儘量少的匹配所搜索的字符串，而默認的貪婪模式則儘量多的匹配所搜索的字符串。例如，對於字符串 "oooo"，'o+?' 將匹配單個 "o"，而 'o+' 將匹配全部 'o'。 . 匹配除換行符（\n、\r）以外的任何單個字符。要匹配包括 '\n' 在內的任何字符，請使用像"(.|\n)"的模式。 (pattern) 匹配 pattern 並獲取這一匹配。所獲取的匹配能夠從產生的 Matches 集合獲得，在VBScript 中使用 SubMatches 集合，在JScript 中則使用 $0…$9 屬性。要匹配圓括號字符，請使用 '\(' 或 '\)'。 (?:pattern) 匹配 pattern 但不獲取匹配結果，也就是說這是一個非獲取匹配，不進行存儲供之後使用。這在使用 "或" 字符 (|) 來組合一個模式的各個部分是頗有用。例如， 'industr(?:y|ies) 就是一個比 'industry|industries' 更簡略的表達式。 (?=pattern) 正向確定預查（look ahead positive assert），在任何匹配pattern的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不須要獲取供之後使用。例如，"Windows(?=95|98|NT|2000)"能匹配"Windows2000"中的"Windows"，但不能匹配"Windows3.1"中的"Windows"。預查不消耗字符，也就是說，在一個匹配發生後，在最後一次匹配以後當即開始下一次匹配的搜索，而不是從包含預查的字符以後開始。 (?!pattern) 正向否認預查(negative assert)，在任何不匹配pattern的字符串開始處匹配查找字符串。這是一個非獲取匹配，也就是說，該匹配不須要獲取供之後使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。預查不消耗字符，也就是說，在一個匹配發生後，在最後一次匹配以後當即開始下一次匹配的搜索，而不是從包含預查的字符以後開始。 (?<=pattern) 反向(look behind)確定預查，與正向確定預查相似，只是方向相反。例如，"(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows"，但不能匹配"3.1Windows"中的"Windows"。 (?<!pattern) 反向否認預查，與正向否認預查相似，只是方向相反。例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows"，但不能匹配"2000Windows"中的"Windows"。 x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 則匹配 "zood" 或 "food"。 [xyz] 字符集合。匹配所包含的任意一個字符。例如， '[abc]' 能夠匹配 "plain" 中的 'a'。 [^xyz] 負值字符集合。匹配未包含的任意字符。例如， '[^abc]' 能夠匹配 "plain" 中的'p'、'l'、'i'、'n'。 [a-z] 字符範圍。匹配指定範圍內的任意字符。例如，'[a-z]' 能夠匹配 'a' 到 'z' 範圍內的任意小寫字母字符。 [^a-z] 負值字符範圍。匹配任何不在指定範圍內的任意字符。例如，'[^a-z]' 能夠匹配任何不在 'a' 到 'z' 範圍內的任意字符。 \b 匹配一個單詞邊界，也就是指單詞和空格間的位置。例如， 'er\b' 能夠匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 \B 匹配非單詞邊界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 \cx 匹配由 x 指明的控制字符。例如， \cM 匹配一個 Control-M 或回車符。x 的值必須爲 A-Z 或 a-z 之一。不然，將 c 視爲一個原義的 'c' 字符。 \d 匹配一個數字字符。等價於 [0-9]。 \D 匹配一個非數字字符。等價於 [^0-9]。 \f 匹配一個換頁符。等價於 \x0c 和 \cL。 \n 匹配一個換行符。等價於 \x0a 和 \cJ。 \r 匹配一個回車符。等價於 \x0d 和 \cM。 \s 匹配任何空白字符，包括空格、製表符、換頁符等等。等價於 [ \f\n\r\t\v]。 \S 匹配任何非空白字符。等價於 [^ \f\n\r\t\v]。 \t 匹配一個製表符。等價於 \x09 和 \cI。 \v 匹配一個垂直製表符。等價於 \x0b 和 \cK。 \w 匹配字母、數字、下劃線。等價於'[A-Za-z0-9_]'。 \W 匹配非字母、數字、下劃線。等價於 '[^A-Za-z0-9_]'。 \xn 匹配 n，其中 n 爲十六進制轉義值。十六進制轉義值必須爲肯定的兩個數字長。例如，'\x41' 匹配 "A"。'\x041' 則等價於 '\x04' & "1"。正則表達式中可使用 ASCII 編碼。 \num 匹配 num，其中 num 是一個正整數。對所獲取的匹配的引用。例如，'(.)\1' 匹配兩個連續的相同字符。 \n 標識一個八進制轉義值或一個向後引用。若是 \n 以前至少 n 個獲取的子表達式，則 n 爲向後引用。不然，若是 n 爲八進制數字 (0-7)，則 n 爲一個八進制轉義值。 \nm 標識一個八進制轉義值或一個向後引用。若是 \nm 以前至少有 nm 個得到子表達式，則 nm 爲向後引用。若是 \nm 以前至少有 n 個獲取，則 n 爲一個後跟文字 m 的向後引用。若是前面的條件都不知足，若 n 和 m 均爲八進制數字 (0-7)，則 \nm 將匹配八進制轉義值 nm。 \nml 若是 n 爲八進制數字 (0-3)，且 m 和 l 均爲八進制數字 (0-7)，則匹配八進制轉義值 nml。 \un 匹配 n，其中 n 是一個用四個十六進制數字表示的 Unicode 字符。例如， \u00A9 匹配版權符號 (?)。

●正則表達式的重複字符： 符號 描述 {n} 匹配前一項n次 {n,} 匹配前一項n次，或者屢次 {n,m} 匹配前一項至少n次，可是不能超過m次 * 匹配前一項0次或屢次，等價於{0,} + 匹配前一項1次或屢次，等價於{1,} ？ 匹配前一項0次或1次，也就是說前一項是可選的，等價於{0,1}   eg：驗證郵政編碼和手機號碼 ●中國的郵政編碼都是6位 ●手機號碼都是11位，而且第1位都是1 示例結果： 分析： var regCode=/^\d{6}$/;     //^:開頭，$：結束，\d：數字，{6}：6位 var regMobile=/^1\d{10}$/; //1：以1開頭，\d：數字，{10}：10位   $(document).ready(function(){     $("#code").blur(function(){         var code = $(this).val();         var $codeId = $("#divCode");         var regCode = /^\d{6}$/;         if (regCode.test(code) == false) {             $codeId.html("郵政編碼不正確，請從新輸入");             return false;         }         $codeId.html("");         return true;     });     $("#mobile").blur(function(){         var mobile = $(this).val();         var $mobileId = $("#divMobile");         var regMobile = /^1\d{10}$/;         if (regMobile.test(mobile) == false) {             $mobileId.html("手機號碼不正確，請從新輸入");             return false;         }        $mobileId.html("");         return true;     }) })

●這則表達式中有：（）、[]、{}區別以下：   ★（）是爲了提取匹配的字符串，表達式中有幾個（）就有幾個相應的匹配字符串；   ★[]是定義匹配的字符串，eg：[A-Za-z0-9]表示字符串要匹配英文字母和數字；   ★{}是用來匹配長度，eg：\s{3}表明匹配三個空格；

十、使用HTML5的方式驗證表單：

●HTML5新增驗證屬性：   屬性 描述 placeholder 提供一種提示（hint），輸入域爲空時顯示，得到焦點輸入內容後消失 required 規定輸入域不能爲空 pattern 規定驗證input域的模式（正則表達式）

●validity屬性： 屬性 描述 valueMissing 表單元素設置了required特性，則爲必填項。若是必填項的值爲空，就沒法經過表單驗證，valueMissing屬性會返回true，不然返回false。 typeMismatch 輸入值與type類型不匹配。HTML 5新增的表單類型如email、number、url等，都包含一個原始的類型驗證。若是用戶輸入的內容與表單類型不符合，則typeMismatch屬性將返回true，不然返回false。 patternMismatch 輸入值與pattern特性的正則表達式不匹配。若是輸入的內容不符合pattern驗證模式的規則，則patternMismatch屬性將返回true，不然返回false。 tooLong 輸入的內容超過了表單元素的maxLength 特性限定的字符長度。雖然在輸入的時候會限制表單內容的長度，但在某種狀況下，如經過程序設置，仍是會超出最大長度限制。若是輸入的內容超過了最大長度限制，則tooLong屬性返回true，不然返回false。 rangeUnderflow 輸入的值小於min特性的值。若是輸入的數值小於最小值，則rangeUnderflow屬性返回true，不然返回false。 rangeOverflow 輸入的值大於max特性的值。若是輸入的數值大於最大值，則rangeOverflow屬性返回true，不然返回false。 stepMismatch 輸入的值不符合step特性所推算出的規則。用於填寫數值的表單元素可能須要同時設置min、max和step特性，這就限制了輸入的值必須是最小值與step特性值的倍數之和。例如範圍從0到10，step特性值爲2，由於合法值爲該範圍內的偶數，其餘數值均沒法經過驗證。若是輸入值不符合要求，則stepMismatch屬性返回true，不然返回false customError 使用自定義的驗證錯誤提示信息。使用setCustomValidity( )方法自定義錯誤提示信息：setCustomValidity(message)會把錯誤提示信息自定義爲message，此時customError屬性值爲true；setCustomValidity("")會清除自定義的錯誤信息，此時customError屬性值爲false。

 

 

 

 

 

^:開頭，$：結束，\d：數字，{6}：6位