當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

[转]jQuery Validate使用说明

發布時間：2023/11/29 编程问答 54 豆豆

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

本文轉自：http://www.cnblogs.com/gimin/p/4757064.html

jQuery Validate

導入 js 庫

默認校驗規則

序號規則描述

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	輸入長度最多是 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。

?默認提示

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

使用方式

1、將校驗規則寫到控件中

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

　　在使用 equalTo 關鍵字時，后面的內容必須加上引號，代碼如下所示：validate="{required:true,minlength:5,equalTo:'#password'}"。

2、將校驗規則寫到 js 代碼中

　　messages 處，如果某個控件沒有 message，將調用默認的信息，

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

?常用方法

1、用其他方式替代默認的 submit

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

使用 ajax 方式

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

2、異步驗證

使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，如果需要提交其他的值，可以使用 data 選項。

remote: "check-email.php"

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

遠程地址只能輸出 "true" 或 "false"，不能有其他輸出。

3、添加自定義校驗

addMethod：name, method, message

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

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

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

4、radio 和 checkbox、select 的驗證

radio 的 required 表示必須選中一個。

checkbox 的 required 表示必須選中。

checkbox 的 minlength 表示必須選中的最小個數，maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

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

select 的 minlength 表示選中的最小個數（可多選的 select），maxlength 表示最大的選中個數，rangelength:[2,3] 表示選中個數區間。

<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

轉載于:https://www.cnblogs.com/freeliver54/p/6410186.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。