jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語(yǔ)作為錯(cuò)誤信息，且已翻譯成其他 37 種語(yǔ)言。

該插件是由 J?rn Zaefferer 編寫和維護(hù)的，他是 jQuery 團(tuán)隊(duì)的一名成員，是 jQuery UI 團(tuán)隊(duì)的主要開發(fā)人員，是 QUnit 的維護(hù)人員。該插件在 2006 年 jQuery 早期的時(shí)候就已經(jīng)開始出現(xiàn)，并一直更新至今。目前版本是?1.14.0。

訪問(wèn)?jQuery Validate 官網(wǎng)，下載最新版的 jQuery Validate 插件。

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

默認(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)提示

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 ).",number: "Please enter a valid number.",digits: "Please enter only digits.",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",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}." ) }

jQuery Validate提供了中文信息提示包，位于下載包的 dist/localization/messages_zh.js，內(nèi)容如下：

(function( factory ) {if ( typeof define === "function" && define.amd ) {define( ["jquery", "../jquery.validate"], factory );} else {factory( jQuery );} }(function( $ ) {/** Translated default messages for the jQuery validation plugin.* Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語(yǔ), 漢語(yǔ))*/ $.extend($.validator.messages, {required: "這是必填字段",remote: "請(qǐng)修正此字段",email: "請(qǐng)輸入有效的電子郵件地址",url: "請(qǐng)輸入有效的網(wǎng)址",date: "請(qǐng)輸入有效的日期",dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",number: "請(qǐng)輸入有效的數(shù)字",digits: "只能輸入數(shù)字",creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",equalTo: "你的輸入不相同",extension: "請(qǐng)輸入有效的后綴",maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),rangelength: $.validator.format("請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符串"),range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值") });}));

你可以將該本地化信息文件 dist/localization/messages_zh.js 引入到頁(yè)面：

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

使用方式

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

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script> $.validator.setDefaults({submitHandler: function() {alert("提交事件!");} }); $().ready(function() {$("#commentForm").validate(); }); </script><form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>輸入您的名字，郵箱，URL，備注。</legend><p><label for="cname">Name (必需, 最小兩個(gè)字母)</label><input id="cname" name="name" minlength="2" type="text" required></p><p><label for="cemail">E-Mail (必需)</label><input id="cemail" type="email" name="email" required></p><p><label for="curl">URL (可選)</label><input id="curl" type="url" name="url"></p><p><label for="ccomment">備注 (必需)</label><textarea id="ccomment" name="comment" required></textarea></p><p><input class="submit" type="submit" value="Submit"></p></fieldset> </form>

總結(jié)

以上是生活随笔為你收集整理的jQuery Validate 合法性，限制性校验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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