jQuery Validate（2）
測試使用版本1.17.0，基礎的使用見上一篇部落格。
1.匯入js
<script type="text/javascript" src="xxx/jquery.min.js"></script> <script type="text/javascript" src="xxx/jquery.validate.min.js"></script> <!-- 需要中文提示則匯入messages_zh.js --> <script type="text/javascript" src="xxx/messages_zh.js"></script>
2.預設校驗規則
| required:true | 必輸欄位 |
| remote: "xxx/validate" | 使用ajax方法呼叫"xxx/validate"驗證輸入值 |
| email: true | 必須輸入正確格式的電子郵件 |
| url: true | 必須輸入正確格式的網址 |
| date: true | 必須輸入正確格式的日期，日期校驗ie6出錯，慎用 |
| dateISO: true | 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 |
| number: true | 必須輸入合法的數字(整數、小數) |
| digits: true | 必須輸入整數 |
| creditcard: true | 必須輸入合法的信用卡號 |
| equalTo: '#password' | 輸入值必須和#password相同 |
| accept: 'image/*' | 選擇合法型別的檔案（MIME），需引用下載包dist目錄下的additional-method.js |
| maxlength: 5 | 輸入長度最多是5的字串(漢字算一個字元) |
| minlength: 10 | 輸入長度最小是10的字串(漢字算一個字元) |
| rangelength: [5, 10] | 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元) |
| range: [5,10] | 輸入值必須介於 5 和 10 之間 |
| max: 5 | 輸入值不能大於5 |
| min: 10 | 輸入值不能小於10 |
3.預設提示
若匯入了中文包，則預設提示資訊則會是中文；位於下載包的 dist/localization/messages_zh.js
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}." )
}
4.自定義校驗
建議在additional-methods.js 檔案中新增（也可在jquery.validate.js中新增）
方法：
addMethod(name, method, message)
- name：規則名稱
- method：(value, element, param) ：value：輸入的值，element：校驗的標籤，param：規則內容
- message：提示資訊
示例：
// 擴充套件驗證（郵政編碼)
$("#formId").validate({
rules: {
postcode: {
postcode: true
}
},
messages: {
postcode: {
postcode: '郵編格式不正確'
}
}
...
});
// 建議在additional-method.js中新增
$.validator.addMethod("postcode", function(value, element, param) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");