作用
jquery.validate是jquery旗下的一個驗證框架，借助jquery的優勢，我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法，並且對國際化也有很好的支持。
使用前的布置
說明：需要JQuery版本：1.2.6+
步驟：
要導入相應的jQuery.js與jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
在相應的字段上指定驗證規則
名稱 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必須要輸入數據
指定要對表單進行驗證
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>
效果如下圖：
基礎知識
指定驗證規則的方式
把驗證規則寫到字段元素的class屬性中
例：
名稱 * <input type="text" name="loginName" class="required"><br>
密 * <input type="password" name="password" class="required"><br>
再次輸入 <input type="password" name="password2"
class="{equalTo: '[name=password]'} required"><br>
生日 <input type="text" name="birthday" class="dateISO"><br>
E-mail *<input type="text" name="email" class="email"><br>
PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">
說明：
如果使用class="{key:value,…}"的方式，必須引入：jquery.metadata.js
表單字段的name不能重復，否則所配置的驗證不起作用。
調用validate()方法時傳遞字段的驗證規則
$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
minlength: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
內置的驗證規則
| required:true |
必填字段 |
| remote:"check.php" |
使用ajax方法調用check.php驗證輸入值 |
| email:true |
必須輸入正確格式的電子郵件 |
| url:true |
必須輸入正確格式的網址 |
| date:true |
必須輸入正確格式的日期 |
| dateISO:true |
必須輸入正確格式的日期(ISO)，例如：2010-01-01，2010/01/01 只驗證格式，不驗證有效性 |
| number:true |
必須輸入合法的數字(負數，小數) |
| digits:true |
必須輸入整數 |
| creditcard: |
必須輸入合法的信用卡號 |
| equalTo:"#field" |
輸入值必須和$(“#field”)相同 |
| accept: "gif|png|jpg" |
輸入擁有合法后綴名的字符串（上傳文件的后綴），多個后綴之間用’|’隔開 |
| maxlength:5 |
輸入長度最多是5的字符串(漢字算一個字符) |
| minlength:3 |
輸入長度最小是3的字符串(漢字算一個字符) |
| rangelength:[5,10] |
輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符) |
| range:[5,10] |
輸入值必須介於 5 和 10 之間 |
| max:5 |
輸入值不能大於5 |
| min:10 |
輸入值不能小於10 |
說明：
remote是遠程驗證：比如注冊驗證用戶名是否已被注冊，返回值只能是true（驗證成功）或false（驗證失敗）。在訪問指定的url時，會自動把當前字段的值做為參數（以字段name為key）傳遞過去。
某些屬性值中的引號不能省略，否則出錯。如accept、equalTo等。
remote使用時遇到的問題：添加用戶時需要驗證用戶名是否存在，當添加上一個用戶后，在不離開該頁面的情況下，再次添加該用戶名的用戶，validate不能提示該用戶已存在，因為緩存的原因，jquery仍認為該用戶名可用。解決方法是在頁面中添加：$().ready(function(){
$.ajaxSetup ({
cache: false //關閉AJAX相應的緩存
}); // 關閉緩存功能
});
添加
修改錯誤信息提示位置：
修改Jquery validate 的錯誤提示位置，把錯誤提示在input內，當獲得鼠標焦點的時候清楚提示信息。
具體使用方法：
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
},
rules:{
name:{
required: true
}
},
messages: {
name:{
required:populateErrorMessage($("#errorRequiredMessage").val(), $("#containerNameTitle").val())
}
}
});
自定義驗證規則
除了內置的驗證規則，validation還允許自定義驗證規則。這是通過validation的addMethod()方法實現的，語法 為：
jQuery.validator.addMethod("name",function,message)
其中:
name為驗證規則的名稱
function定義驗證的規則。參數有?。返回值為?。
message是驗證失敗時的提示信息。
指定錯誤提示內容
更改默認的提示內容
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "請指定一個不重復的值",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法后綴名的字符串",
maxlength: jQuery.validator.format("允許的最大長度為 {0} 個字符"),
minlength: jQuery.validator.format("允許的最小長度為 {0} 個字符"),
rangelength: jQuery.validator.format("允許的長度為{0}和{1}之間"),
range: jQuery.validator.format("請輸入介於 {0} 和 {1} 之間的值"),
max: jQuery.validator.format("請輸入一個最大為 {0} 的值"),
min: jQuery.validator.format("請輸入一個最小為 {0} 的值")
});
個別表單改變提示內容（只對當前表單有效）
方法一：
<input type="file" name="parResource"
class="{required: true, accept: 'zip', messages: {required: '請選擇文件', accept:'請選擇正確的文件'}}">
方法二：
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必選字段2"
},
email: {
required: '必選字段22',
email: "請輸入正確格式的電子郵件2"
}
}
});
});
改變錯誤消息顯示樣式
指定label.error的樣式就可以了，如下：
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
說明：label.error指class為error的label元素，如：<label for="resource" class="error">
擴展使用
怎么讓錯誤提示信息顯示到指定的位置
實例下載：表單驗證