jQuery Validate
阿新 • • 發佈：2021-01-08
jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程式各種需求。該外掛捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自定義方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊，且已翻譯成其他 37 種語言。
該外掛是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該外掛在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是1.14.0。
菜鳥教程提供的 1.14.0 版本下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
匯入 js 庫（使用菜鳥教程提供的CDN）
<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>
2、將校驗規則寫到 js 程式碼中
$().ready(function() {
// 在鍵盤按下並釋放及提交後驗證提交表單
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "請輸入您的名字",
lastname: "請輸入您的姓氏",
username: {
required: "請輸入使用者名稱",
minlength: "使用者名稱必需由兩個字元組成"
},
password: {
required: "請輸入密碼",
minlength: "密碼長度不能小於 5 個字元"
},
confirm_password: {
required: "請輸入密碼",
minlength: "密碼長度不能小於 5 個字元",
equalTo: "兩次密碼輸入不一致"
},
email: "請輸入一個正確的郵箱",
agree: "請接受我們的宣告",
topic: "請選擇兩個主題"
}
})
});
messages 處，如果某個控制元件沒有 message，將呼叫預設的資訊
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>驗證完整的表單</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">使用者名稱</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密碼</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">驗證密碼</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">請同意我們的宣告</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<label for="newsletter">我樂意接收新資訊</label>
<input type="checkbox" class="checkbox"