1629. 按鍵持續時間最長的鍵
1192
2025-03-31
jQuery 應用一之驗證插件 validate 的使用
綜述
validate 是一個用來驗證表單提交的插件，應用十分廣泛，具有如下的幾個功能
自帶了基本的驗證規則
提供了豐富的驗證信息提示功能
多種事件觸發驗證
自定義驗證規則
下面我們就來感受一下這個插件的強大之處吧
插件下載
在這里我們需要用到的插件文件有
jquery.validate.js
jquery.validate.messages_cn.js
jquery.min.js
一個是表單驗證的主文件，另一個是設置中文提示的文件。
實例引入
我們先用一個小例子來感受一下使用 validate 插件的便捷之處，這個例子中加入了表單合法性驗證和錯誤提示，代碼如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
運行結果如下 在這里我們定義了 rules 來控制表單的合法性，通過 errorPlacement 來控制錯誤的輸出位置。
校驗規則
下面我們詳細說一下關于 rules 的相關知識，將校檢規則總結如下
序號
規則
描述
1
required:true
必須輸入的字段。
2
remote:”check.php”
使用 ajax 方法調用 check.php 驗證輸入值。
3
email:true
必須輸入正確格式的電子郵件。
4
url:true
必須輸入正確格式的網址。
5
date:true
必須輸入正確格式的日期。日期校驗 ie6 出錯，慎用。
6
dateISO:true
必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗證格式，不驗證有效性。
7
number:true
必須輸入合法的數字（負數，小數）。
8
digits:true
必須輸入整數。
9
creditcard:
必須輸入合法的信用卡號。
10
equalTo:”#field”
輸入值必須和 #field 相同。
11
accept:
輸入擁有合法后綴名的字符串（上傳文件的后綴）。
12
maxlength:5
13
minlength:10
輸入長度最小是 10 的字符串（漢字算一個字符）。
14
rangelength:[5,10]
輸入長度必須介于 5 和 10 之間的字符串（漢字算一個字符）。
15
range:[5,10]
輸入值必須介于 5 和 10 之間。
16
max:5
輸入值不能大于 5。
17
min:10
輸入值不能小于 10。
比如我們針對 email 這個表單就可以定義為
1
email: { required: true, email: true }
針對 url 的這個輸入表單就可以定義為
1
url: { required: true, url: true }
以上便是校驗規則的相關內容。
消息提示
在 jquery.validate.js 這個文件中，定義了默認的消息提示，不過它是英文的提示，默認的提示如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein gültiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},
比如，如果遇到 email 校驗有問題，那么便會提示
1
Please enter a valid email address
不過我們通過引入 jquery.validate.messages_cn.js 這個文件，寫入了如下代碼，將默認的提示修改為中文
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
jQuery.extend(jQuery.validator.messages, {
required: "必選字段",
remote: "請修正該字段",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法后綴名的字符串",
maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字符串"),
minlength: jQuery.format("請輸入一個長度最少是 {0} 的字符串"),
rangelength: jQuery.format("請輸入一個長度介于 {0} 和 {1} 之間的字符串"),
range: jQuery.format("請輸入一個介于 {0} 和 {1} 之間的值"),
max: jQuery.format("請輸入一個最大為 {0} 的值"),
min: jQuery.format("請輸入一個最小為 {0} 的值")
});
當然，以上的設置都是默認的提示，我們還可以通過 messages 來設置提示，舉一個小例子，加入 messages 選項
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
運行結果如下
失敗驗證
1
2
3
errorPlacement: function(error, element) {
error.appendTo(element.siblings("span"));
},
我們用 errorPlacement 來處理驗證失敗后的處理，方法有兩個參數，一個是 error，一個是 element。 其中 error 是字符串，保存了 messages 中返回的錯誤信息，element 是驗證失敗的 input 元素。 比如上面這一句
1
error.appendTo(element.siblings("span"));
就代表把錯誤加入到 input 元素同級的 span 元素中，從而在標簽內部顯示錯誤的內容。 其他的情況我們可以靈活處理。
成功驗證
有失敗就有成功，在這里我們可以用一個函數來實現成功的驗證
1
2
3
success: function(label) {
label.html("OK");
}
這里的 label 指的是發生錯誤時那個標簽，就是上面例子中的 span，通過 html () 方法可以實現標簽內容的變化。例如下面的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
上面就是驗證成功之后的效果，在相應提示的地方會顯示 OK。
異步驗證
有時候我們需要用到異步驗證，我們可以在 rules 中加入 remote 進行遠程驗證，例子如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
PHP 處理程序，注意這里的返回值只能是 true 或者 false，并且需要加引號。
1
2
3
4
5
6
7
8
$phone = $_POST['phone'];
if((strlen($phone) != 11) || !(preg_match("/13[0123456789]{1}\d{8}|15[012356789]\d{8}|18[0123456789]\d{8}|17[0678]\d{8}|14[57]\d{8}/",$phone))){
echo "false";
}else{
echo "true";
}
?>
演示如下 上面就是進行 ajax 異步驗證的處理方式
自定義方法
有時候我們需要自定義一些驗證方法，我們就需要用到 addMethod 方法，介紹如下 addMethod (name,method,message) 方法
參數 name 是添加的方法的名字 參數 method 是一個函數，接收三個參數 (value,element,param) value 是元素的值，element 是元素本身 param 是參數，我們可以用 addMethod 來添加除 built-in Validation methods 之外的驗證方法
例如手機號碼的驗證如下
1
2
3
4
5
6
7
$.validator.addMethod("phone",function(value,element,params){
if((value.length != 11) || (!value.match(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[0|6|7|8]|18[0-9])\d{8}$/))){
return false;
}else{
return true;
}
},"請輸入正確的手機號");
使用時如下
1
2
3
4
5
rules:{
phone:{
required:true,phone:true
},
},
有一個字段，只能輸一個字母，范圍是 a-f, 寫法如下
1
2
3
4
5
6
7
8
9
10
$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},”必須是一個字母,且a-f”);
使用時如下
1
2
3
rules:{
username:{ af:["a","f"] }
},
以上便是自定義驗證方法的方式
DeBug 模式
開啟 DeBug 模式后，不會進行提交，只需要在代碼中加入
1
debug:true
即可，這樣不論怎樣，都不會提交表單，對于調試十分有用。
驗證通過提交
在上面的例子中，我們沒有設置表單驗證通過之后才提交，通過加入以下代碼，可以實現驗證之后才提交的效果
1
2
3
submitHandler:function(form){
form.submit();
}
通過設置上面的內容，我們就可以避免驗證不成功 submit 跳轉了
忽略元素
有時候，我們想跳過某些元素不進行驗證，可以通過加入如下代碼來實現，舉例如下
1
ignore:"input",
忽略所有 input 元素
1
ignore:"#username",
忽略 id 為 username 的元素
1
ignore:".input",
忽略所有 class 為 input 的元素
響應事件
在默認的響應事件是 submit 提交事件，我們還可以通過設置來改變事件的響應，比如失去焦點時驗證等等，舉例如下 Onubmit：類型 Boolean，默認 true，指定是否提交時驗證。
1
$(".selector").validate({ onsubmit:false })
onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。
1
$(".selector").validate({ ? ? onfocusout:false })
onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。
1
$(".selector").validate({ ? ?onkeyup:false })
onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。
1
$(".selector").validate({ ? ?onclick:false })
focusInvalid：類型 Boolean，默認 true。提交表單后，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。
1
$(".selector").validate({ ? ?focusInvalid:false })
focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。
1
$(".selector").validate({ ? ?focusCleanup:true })
上面的響應事件一般不太常用，僅作了解即可。
總結
以上便是 jQuery 插件 validate 的用法，利用好這款插件對于編寫將有極其大的幫助，希望大家能好好學習！
jQuery jQuery UI
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
