概述
jQuery Validation 是前端表單驗證架構
使用步驟
頁面引用
<!-- jQuery Validation 1.14.0 -->
<script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/additional-methods.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/localization/messages_zh.js"></script>
使用案例
<form:input path="username" class="form-control required" placeholder="使用者名" />
$(function () {
$("#inputForm").validate({
errorElement: 'span',
errorClass: 'help-block',】
errorPlacement: function (error, element) {
element.parent().parent().attr("class", "form-group has-error");
error.insertAfter(element);
}
});
});
預設校驗規則聲明
-
:required
必輸字段true
-
:remote
使用check.php
方法調用`check.php驗證輸入值ajax
-
:email
必須輸入正确格式的電子郵件true
-
:url
必須輸入正确格式的網址true
-
:date
必須輸入正确格式的日期true
-
:dateISO
必須輸入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 隻驗證格式,不驗證有效性true
-
:number
必須輸入合法的數字(負數,小數)true
-
:digits
必須輸入整數true
-
: 必須輸入合法的信用卡号creditcard
-
:equalTo
,輸入值必須和#field
相同#field
-
: 輸入擁有合法字尾名的字元串(上傳檔案的字尾)accept
-
:maxlength
,輸入長度最多是5的字元串(漢字算一個字元)5
-
:minlength
,輸入長度最小是10的字元串(漢字算一個字元)10
-
:rangelength
,輸入長度必須介于 5 和 10 之間的字元串")(漢字算一個字元)[5,10]
-
:range
,輸入值必須介于 5 和 10 之間[5,10]
-
:max
,輸入值不能大于 55
-
:min
,輸入值不能小于 1010
自定義校驗規則
$.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機号碼格式錯誤");
封裝校驗器
/**
* jQuery 有效性驗證
* @constructor
*/
var Validate = function () {
/**
* 初始化校驗規則
*/
var handlerInit = function () {
$.validator.addMethod("mobile", function (value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機号碼格式錯誤");
};
/**
* 表單驗證
* @param formId
*/
var handlerValidate = function (formId) {
$("#" + formId).validate({
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
element.parent().parent().attr("class", "form-group has-error");
error.insertAfter(element);
}
});
};
return {
/**
* 初始化校驗規則
*/
init: function () {
handlerInit();
},
/**
* 表單驗證
* @param formId
*/
validateForm: function (formId) {
handlerValidate(formId);
}
}
}();
$(function () {
Validate.init();
});