成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

導航首頁 ? 技術教程 ? jQuery Validate插件實現表單驗證
全站頭部文字 我要出現在這里
jQuery Validate插件實現表單驗證 647 2024-02-21   

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

 <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.min.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.validate.min.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/validate-methods.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/messages_zh.min.js"></script>

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表單驗證</title>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.min.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery.validate.min.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/validate-methods.js"></script>
 <script type="text/javascript" src="http://www.gimoo.net/t/1901/messages_zh.min.js"></script>
</head>
<body>
<form action="" method="" class="" id="demo">
 <div class="">
 <label>帳號:</label>
 <div>
 <input name="username" type="text"placeholder="請填寫由數字、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,
 /*默認效驗規則*/
 account :true,
 /*最短6位數,最長16位數*/
 minlength:6,
 maxlength:16

 },
 tel:{
 required:true,
 /*默認效驗規則*/
 number:true
 },
 email:{
 required:true,
 /*默認效驗規則*/
 email:true
 },
 bt:{
 /*默認必填*/
 required:true,
 },
 password:{
 required:true,
 minlength:6,
 maxlength:16,
 /*密碼驗證*/
 equalTo:"#password"
 },
 },
 /*錯誤提示*/
 messages:{
 username:{
 /*錯誤顯示的提示語*/
 required:"請填寫由數字、26個英文字母或者下劃線組成的帳號!",
 minlength:"帳號最小為6位",
 maxlength:"帳號最大為16位",
 },
 tel:{
 required:"請填寫手機號碼",
 },
 email:{
 required:"請填寫郵箱",
 },
 password:{
 required:"請填寫密碼",
 minlength:"密碼最小為6位",
 maxlength:"密碼最大為16位",
 },
 },
 });
 /*創建自定義正則表達式語法*/
 $.validator.addMethod("account",function(value,element,params){
 var account = /^w{3,20}$/;
 return (account.test(value));
 },"請填寫由數字、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));
 },"請填寫正確的手機號碼!");
</script>
</html>

瀏覽器結果:

查看圖片
查看圖片

默認校驗規則

查看圖片

常用的正則表達式

一、校驗數字的表達式

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

二、校驗字符的表達式

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

精彩專題分享:jQuery插件validate驗證方法匯總

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持綠夏網。



主站蜘蛛池模板: 都市频道在线直播回放| 人世间演员表| 杨佑宁个人简历| 魔影| 姐妹微电影| 1905电影网| 韩宇辰| 电影男女| 毛骨悚然撞鬼经| 装饰色彩| 何昊阳| 一个都不能少电影| 杨在葆个人资料简介| 飞天少女猪| 韩国一级黄色录像| 卓安律师事务所| 贝蒂的启蒙| 失落的星球| 美女比基尼跳舞| 摘抄现代诗| 泰剧谁的青春不乱爱| 我们的新时代演员表| 女生被侵犯的视频| 非常外父| 陈牧驰介绍个人资料| 饥渴女人的外遇| 红岩电影| 浪客剑心星霜篇| 张志忠主演电视剧| 晋剧下河东全本| 黄造时曹查理隔世情电影| cctv16直播| 小小少年电影简介| 抖音 网页版| 重温经典频道在线直播| 梦桐| 抖音下截| 《侏罗纪公园1》电影免费观看| 道东道西| angelawhite在线av| 宋学士濂文言文翻译|

?。。≌鹃L長期在線接?。?!

網站、小程序:定制開發/二次開發/仿制開發等

各種疑難雜癥解決/定制接口/定制采集等

站長微信:lxwl520520

站長QQ:1737366103