當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

[转]jQuery Validate使用说明

發(fā)布時(shí)間：2023/11/29 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 [转]jQuery Validate使用说明小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文轉(zhuǎn)自：http://www.cnblogs.com/gimin/p/4757064.html

jQuery Validate

導(dǎo)入 js 庫(kù)

默認(rèn)校驗(yàn)規(guī)則

序號(hào)規(guī)則描述

1	required:true	必須輸入的字段。
2	remote:"check.php"	使用 ajax 方法調(diào)用 check.php 驗(yàn)證輸入值。
3	email:true	必須輸入正確格式的電子郵件。
4	url:true	必須輸入正確格式的網(wǎng)址。
5	date:true	必須輸入正確格式的日期。日期校驗(yàn) ie6 出錯(cuò)，慎用。
6	dateISO:true	必須輸入正確格式的日期（ISO），例如：2009-06-23，1998/01/22。只驗(yàn)證格式，不驗(yàn)證有效性。
7	number:true	必須輸入合法的數(shù)字（負(fù)數(shù)，小數(shù)）。
8	digits:true	必須輸入整數(shù)。
9	creditcard:	必須輸入合法的信用卡號(hào)。
10	equalTo:"#field"	輸入值必須和 #field 相同。
11	accept:	輸入擁有合法后綴名的字符串（上傳文件的后綴）。
12	maxlength:5	輸入長(zhǎng)度最多是 5 的字符串（漢字算一個(gè)字符）。
13	minlength:10	輸入長(zhǎng)度最小是 10 的字符串（漢字算一個(gè)字符）。
14	rangelength:[5,10]	輸入長(zhǎng)度必須介于 5 和 10 之間的字符串（漢字算一個(gè)字符）。
15	range:[5,10]	輸入值必須介于 5 和 10 之間。
16	max:5	輸入值不能大于 5。
17	min:10	輸入值不能小于 10。

?默認(rèn)提示

默認(rèn)提示為英文，如需要修改，可在 js 代碼中加入，推薦做法，將此文件放入 messages_cn.js 中，在頁(yè)面中引入：

使用方式

1、將校驗(yàn)規(guī)則寫(xiě)到控件中

　　默認(rèn)是這種形式class="required"，使用 class="{}" 的方式，必須引入包：jquery.metadata.js，又通過(guò)修改jquery.metadata.js，將class替換成validate,故最終統(tǒng)一為：validate="{required:true}"。

　　在使用 equalTo 關(guān)鍵字時(shí)，后面的內(nèi)容必須加上引號(hào)，代碼如下所示：validate="{required:true,minlength:5,equalTo:'#password'}"。

2、將校驗(yàn)規(guī)則寫(xiě)到 js 代碼中

　　messages 處，如果某個(gè)控件沒(méi)有 message，將調(diào)用默認(rèn)的信息，

　　required:true 必須有值。　　required:"#aa:checked" 表達(dá)式的值為真，則需要驗(yàn)證。　　required:function(){} 返回為真，表示需要驗(yàn)證。

?常用方法

1、用其他方式替代默認(rèn)的 submit

$().ready(function() {$("#signupForm").validate({submitHandler:function(form){alert("submitted"); form.submit(); } }); });

使用 ajax 方式

$("#signupForm").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })

2、異步驗(yàn)證

使用 ajax 方式進(jìn)行驗(yàn)證，默認(rèn)會(huì)提交當(dāng)前驗(yàn)證的值到遠(yuǎn)程地址，如果需要提交其他的值，可以使用 data 選項(xiàng)。

remote: "check-email.php"

remote: {url: "check-email.php", //后臺(tái)處理程序type: "post", //數(shù)據(jù)發(fā)送方式dataType: "json", //接受數(shù)據(jù)格式 data: { //要傳遞的數(shù)據(jù)username: function() {return $("#username").val();}} }

遠(yuǎn)程地址只能輸出 "true" 或 "false"，不能有其他輸出。

3、添加自定義校驗(yàn)

addMethod：name, method, message

// 郵政編碼驗(yàn)證 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value)); }, "請(qǐng)正確填寫(xiě)您的郵政編碼");

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建議一般寫(xiě)在 additional-methods.js 文件中。

注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、數(shù)字和下劃線"。調(diào)用前要添加對(duì) additional-methods.js 文件的引用。

4、radio 和 checkbox、select 的驗(yàn)證

radio 的 required 表示必須選中一個(gè)。

checkbox 的 required 表示必須選中。

checkbox 的 minlength 表示必須選中的最小個(gè)數(shù)，maxlength 表示最大的選中個(gè)數(shù)，rangelength:[2,3] 表示選中個(gè)數(shù)區(qū)間。

select 的 required 表示選中的 value 不能為空。

select 的 minlength 表示選中的最小個(gè)數(shù)（可多選的 select），maxlength 表示最大的選中個(gè)數(shù)，rangelength:[2,3] 表示選中個(gè)數(shù)區(qū)間。

<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option> </select>

分類: Javascirpt

轉(zhuǎn)載于:https://www.cnblogs.com/freeliver54/p/6410186.html

總結(jié)

以上是生活随笔為你收集整理的[转]jQuery Validate使用说明的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。