jQuery Validate插件實現(xiàn)表單驗證

2019-11-20 09:11:58

字體：大中小

供稿：網(wǎng)友

jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。更重要的是他是由jQuery 團隊、 jQuery UI 團隊的主要開發(fā)人員Jörn Zaefferer 編寫和維護的。具體我們可以訪問 jQuery Validate 官網(wǎng)，下載最新版的 jQuery Validate 插件。
需要引入以下JS文件

 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="validate-methods.js"></script> <script type="text/javascript" src="messages_zh.min.js"></script>

validate-methods.js 為擴展的驗證規(guī)則
messages_zh.js 為驗證提示文件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表單驗證</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="validate-methods.js"></script> <script type="text/javascript" src="messages_zh.min.js"></script></head><body><form action="" method="" class="" id="demo"> <div class=""> <label>帳號：</label> <div> <input name="username" type="text"placeholder="請?zhí)顚懹蓴?shù)字、26個英文字母或者下劃線組成的帳號!"> </div> </div> <div> <label>手機號碼：</label> <div> <input name="tel" type="text"placeholder="請輸入手機號碼"> </div> </div> <div> <label>郵箱：</label> <div> <input name="email" type="email"placeholder="請輸入郵箱"> </div> </div> <div> <label>必填字段：</label> <div> <input name="bt" type="text"placeholder="這是必填字段"> </div> </div> <div> <label>輸入密碼：</label> <div> <input name="password" type="password"placeholder="請輸入密碼"> </div> </div> <div> <label>請再次輸入密碼：</label> <div> <input name="password" type="password"placeholder="請再次輸入密碼"> </div> </div> <div> <div> <button type="submit">提交</button> </div> </div></form></body><script type="text/javascript"> $("#demo").validate({ rules:{ username:{ required:true, /*默認效驗規(guī)則*/ account :true, /*最短6位數(shù)，最長16位數(shù)*/ minlength:6, maxlength:16 }, tel:{ required:true, /*默認效驗規(guī)則*/ number:true }, email:{ required:true, /*默認效驗規(guī)則*/ email:true }, bt:{ /*默認必填*/ required:true, }, password:{ required:true, minlength:6, maxlength:16, /*密碼驗證*/ equalTo:"#password" }, }, /*錯誤提示*/ messages:{ username:{ /*錯誤顯示的提示語*/ required:"請?zhí)顚懹蓴?shù)字、26個英文字母或者下劃線組成的帳號!", minlength:"帳號最小為6位", maxlength:"帳號最大為16位", }, tel:{ required:"請?zhí)顚懯謾C號碼", }, email:{ required:"請?zhí)顚戉]箱", }, password:{ required:"請?zhí)顚懨艽a", minlength:"密碼最小為6位", maxlength:"密碼最大為16位", }, }, }); /*創(chuàng)建自定義正則表達式語法*/ $.validator.addMethod("account",function(value,element,params){ var account = /^/w{3,20}$/; return (account.test(value)); },"請?zhí)顚懹蓴?shù)字、26個英文字母或者下劃線組成的帳號!"); $.validator.addMethod("number",function(value,element,params){ var number = /^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+/d{8})$/; return (number.test(value)); },"請?zhí)顚懻_的手機號碼!");</script></html>

瀏覽器結(jié)果：

代碼演示操作結(jié)果
這里寫圖片描述

默認校驗規(guī)則

常用的正則表達式

一、校驗數(shù)字的表達式

1 數(shù)字：^[0-9]*$
2 n位的數(shù)字：^/d{n}$
3 至少n位的數(shù)字：^/d{n,}$
4 m-n位的數(shù)字：^/d{m,n}$
5 零和非零開頭的數(shù)字：^(0|[1-9][0-9]*)$
6 非零開頭的最多帶兩位小數(shù)的數(shù)字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 帶1-2位小數(shù)的正數(shù)或負數(shù)：^(/-)?/d+(/./d{1,2})?$
8 正數(shù)、負數(shù)、和小數(shù)：^(/-|/+)?/d+(/./d+)?$
9 有兩位小數(shù)的正實數(shù)：^[0-9]+(.[0-9]{2})?$
10 有1~3位小數(shù)的正實數(shù)：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整數(shù)：^[1-9]/d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^/+?[1-9][0-9]*$
12 非零的負整數(shù)：^/-[1-9][]0-9"*$ 或 ^-[1-9]/d*$
13 非負整數(shù)：^/d+$ 或 ^[1-9]/d*|0$
14 非正整數(shù)：^-[1-9]/d*|0$ 或 ^((-/d+)|(0+))$
15 非負浮點數(shù)：^/d+(/./d+)?$ 或 ^[1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0$
16 非正浮點數(shù)：^((-/d+(/./d+)?)|(0+(/.0+)?))$ 或 ^(-([1-9]/d*/./d*|0/./d*[1-9]/d*))|0?/.0+|0$
17 正浮點數(shù)：^[1-9]/d*/./d*|0/./d*[1-9]/d*$ 或 ^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 負浮點數(shù)：^-([1-9]/d*/./d*|0/./d*[1-9]/d*)$ 或 ^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮點數(shù)：^(-?/d+)(/./d+)?$ 或 ^-?([1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0)$

二、校驗字符的表達式

1 漢字：^[/u4e00-/u9fa5]{0,}$
2 英文和數(shù)字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 長度為3-20的所有字符：^.{3,20}$
4 由26個英文字母組成的字符串：^[A-Za-z]+$
5 由26個大寫英文字母組成的字符串：^[A-Z]+$
6 由26個小寫英文字母組成的字符串：^[a-z]+$
7 由數(shù)字和26個英文字母組成的字符串：^[A-Za-z0-9]+$
8 由數(shù)字、26個英文字母或者下劃線組成的字符串：^/w+$ 或 ^/w{3,20}$
9 中文、英文、數(shù)字包括下劃線：^[/u4E00-/u9FA5A-Za-z0-9_]+$
10 中文、英文、數(shù)字但不包括下劃線等符號：^[/u4E00-/u9FA5A-Za-z0-9]+$ 或 ^[/u4E00-/u9FA5A-Za-z0-9]{2,20}$
11 可以輸入含有^%&',;=?$/"等字符：[^%&',;=?$/x22]+
12 禁止輸入含有~的字符：[^~/x22]+

三、特殊需求表達式

1 Email地址：^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^/s]* 或 ^http://([/w-]+/.)+[/w-]+(/[/w-./?%&=]*)?$
4 手機號碼：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])/d{8}$
5 電話號碼("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(/(/d{3,4}-)|/d{3.4}-)?/d{7,8}$
6 國內(nèi)電話號碼(0511-4405222、021-87888822)：/d{3}-/d{8}|/d{4}-/d{7}
7 身份證號：
15或18位身份證：^/d{15}|/d{18}$
15位身份證：^[1-9]/d{7}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{3}$
18位身份證：^[1-9]/d{5}[1-9]/d{3}((0/d)|(1[0-2]))(([0|1|2]/d)|3[0-1])/d{4}$
8 短身份證號碼(數(shù)字、字母x結(jié)尾)：^([0-9]){7,18}(x|X)?$ 或 ^/d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帳號是否合法(字母開頭，允許5-16字節(jié)，允許字母數(shù)字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 密碼(以字母開頭，長度在6~18之間，只能包含字母、數(shù)字和下劃線)：^[a-zA-Z]/w{5,17}$
11 強密碼(必須包含大小寫字母和數(shù)字的組合，不能使用特殊字符，長度在8-10之間)：^(?=.*/d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
12 日期格式：^/d{4}-/d{1,2}-/d{1,2}
13 一年的12個月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一個月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15 錢的輸入格式：
16 1.有四種錢的表示形式我們可以接受:"10000.00" 和 "10,000.00", 和沒有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$
17 2.這表示任意一個不以0開頭的數(shù)字,但是,這也意味著一個字符"0"不通過,所以我們采用下面的形式：^(0|[1-9][0-9]*)$
18 3.一個0或者一個不以0開頭的數(shù)字.我們還可以允許開頭有一個負號：^(0|-?[1-9][0-9]*)$
19 4.這表示一個0或者一個可能為負的開頭不為0的數(shù)字.讓用戶以0開頭好了.把負號的也去掉,因為錢總不能是負的吧.下面我們要加的是說明可能的小數(shù)部分：^[0-9]+(.[0-9]+)?$
20 5.必須說明的是,小數(shù)點后面至少應(yīng)該有1位數(shù),所以"10."是不通過的,但是 "10" 和 "10.2" 是通過的：^[0-9]+(.[0-9]{2})?$
21 6.這樣我們規(guī)定小數(shù)點后面必須有兩位,如果你認為太苛刻了,可以這樣：^[0-9]+(.[0-9]{1,2})?$
22 7.這樣就允許用戶只寫一位小數(shù).下面我們該考慮數(shù)字中的逗號了,我們可以這樣：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
23 8.1到3個數(shù)字,后面跟著任意個逗號+3個數(shù)字,逗號成為可選,而不是必須：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
24 備注：這就是最終結(jié)果了,別忘了"+"可以用"*"替代如果你覺得空字符串也可以接受的話(奇怪,為什么?)最后,別忘了在用函數(shù)時去掉去掉那個反斜杠,一般的錯誤都在這里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+//.[x|X][m|M][l|L]$
26 中文字符的正則表達式：[/u4e00-/u9fa5]
27 雙字節(jié)字符：[^/x00-/xff] (包括漢字在內(nèi)，可以用來計算字符串的長度(一個雙字節(jié)字符長度計2，ASCII字符計1))
28 空白行的正則表達式：/n/s*/r (可以用來刪除空白行)
29 HTML標記的正則表達式：<(/S*?)[^>]*>.*?<//1>|<.*? /> (網(wǎng)上流傳的版本太糟糕，上面這個也僅僅能部分，對于復(fù)雜的嵌套標記依舊無能為力)
30 首尾空白字符的正則表達式：^/s*|/s*$或(^/s*)|(/s*$) (可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等)，非常有用的表達式)
31 騰訊QQ號：[1-9][0-9]{4,} (騰訊QQ號從10000開始)
32 中國郵政編碼：[1-9]/d{5}(?!/d) (中國郵政編碼為6位數(shù)字)
33 IP地址：/d+/./d+/./d+/./d+ (提取IP地址時有用)