jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，并一直更新至今。目前版本是?1.14.0。

訪問?jQuery Validate 官網，下載最新版的 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>

默認校驗規則

序號 規則 描述

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。

默認提示

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，內容如下：

(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), 漢語, 漢語)*/ $.extend($.validator.messages, {required: "這是必填字段",remote: "請修正此字段",email: "請輸入有效的電子郵件地址",url: "請輸入有效的網址",date: "請輸入有效的日期",dateISO: "請輸入有效的日期 (YYYY-MM-DD)",number: "請輸入有效的數字",digits: "只能輸入數字",creditcard: "請輸入有效的信用卡號碼",equalTo: "你的輸入不相同",extension: "請輸入有效的后綴",maxlength: $.validator.format("最多可以輸入 {0} 個字符"),minlength: $.validator.format("最少要輸入 {0} 個字符"),rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數值"),max: $.validator.format("請輸入不大于 {0} 的數值"),min: $.validator.format("請輸入不小于 {0} 的數值") });}));

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

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

使用方式

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

<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 (必需, 最小兩個字母)</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>

總結

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

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