JQuery制作網頁——第九章 表單驗證

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

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

3、  表單驗證的思路：

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

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

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

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

4、表單選擇器：

語法	描述	示例
: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"等元素

5、表單屬性過濾選擇器：

語法	描述	示例
:enabled	匹配所有可用元素	$(" #userform :enabled" )匹配form內部除編號輸入框外的所有元素
:disabled	匹配所有不可用元素	$(" #userform :disabled" )匹配被禁用的輸入框
:checked	匹配所有被選中元素（復選框、單項按鈕、select 中的option）	$(" #userform :checked" )匹配選中的選項
:selected	匹配所有選中的option 元素	$(" #userform :selected" ) 匹配指定元素的選項

6、驗證表單內容：

●使用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;                   }               }

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

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

類別	名稱	描述
事件	onblur	失去焦點，當光標離開某個文本框時觸發
	onfocus	獲得焦點，當光標進入某個文本框時觸發
方法	blur()	從文本域中移開焦點
	focus()	在文本域中設置焦點，即獲得鼠標光標
	select()	選取文本域中的內容，突出顯示輸入區域的內容

 

8、 正則表達式：是一個描述字符模式的對象，它是由一些特殊的符號組成的，和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})?$/;

9、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}代表匹配三個空格；

10、使用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位