html結(jié)構(gòu)
<form action="" id="formId">
<div class="mb20">
<input type="" name="inputName" id="inputId"></div>
<div class="mb20">
<select name="selectName" id="selectId">
<option value="">All</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="mb20">
<label for="checkboxName">
<input type="checkbox" name="checkboxName" id="checkboxId">單選框</label>
</div>
<div class="mb20">
<input type="text" name="groupName1" id="groupName1">
<input type="text" name="groupName2" id="groupName2"></div>
<div class="mb20">
<button type="button" class="btn formSubmit">提交</button>
</div>
</form>
js jQuery.validate構(gòu)建
require(['jquery', 'validation'], function($) {
var formValid = $('#formId').validate({
// 指定錯誤提示的css類名,可以自定義錯誤提示的樣式
errorClass: "error-explain",
// 指定成功提示的css類名,可以自定義錯誤提示的樣式
validClass: "valid-explain",
// 指定成功提示的css類名,可以自定義錯誤提示的樣式
success: "valid-success",
// 使用什么標(biāo)簽標(biāo)記錯誤
errorElement: "div",
// 使用什么標(biāo)簽errorELement包起來
wrapper: "div",
// 對某些元素不進(jìn)行驗證
ignore: ":hidden",
// 是否提交時驗證
onsubmit: true,
// 是否在獲得焦點時驗證
onfocusin: true,
// 是否在獲取焦點時驗證
onfocusout: true,
// 是否在敲擊鍵盤時驗證
onkeyup: true,
// 是否在鼠標(biāo)點擊時驗證
onclick: true,
// 提交表單后,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點
focusInvalid: true,
// 當(dāng)未通過驗證的元素獲得焦點時,并移除錯誤提示（避免和 focusInvalid.一起使用
focusCleanup: false,
// 對一組元素的驗證,用一個錯誤提示
groups: {
group1: 'groupName1 groupName2'
},
// 自定義錯誤放到哪里
errorPlacement: function(error, element) {
// 同個父集
error.appendTo(element.parent());
},
rules: {
inputName: {
required: true
},
selectName: {
required: true
},
checkboxName: {
required: true
},
groupName1: {
required: true
},
groupName2: {
required: true
},
testName: {
required: true,
remote: {
// 后臺處理程序
url: "check-email.php",
// 數(shù)據(jù)發(fā)送方式
type: "post",
// 接受數(shù)據(jù)格式
dataType: "json",
// 要傳遞的數(shù)據(jù)
// 遠(yuǎn)程地址只能輸出 "true" 或 "false"
data: {
testName: function() {
return $("#testName").val();
}
}
},
email: true,
url: true,
date: true,
dateISO: true,
number: true,
digits: true,
creditcard: true,
equalTo: "#testName",
maxlength: 10,
minlength: 1,
rangelength: [1, 10],
range: [1, 10],
max: 1,
min: 10,
remoteMsg: {
url: '/commonapi/check/checkSensitiveWords.cf'
}
}
},
messages: {
inputName: {
required: '必填項'
},
selectName: {
required: '必填項'
},
checkboxName: {
required: '必填項'
},
groupName1: {
required: '必填項'
},
groupName2: {
required: '必填項'
},
testName: {
required: "必須填寫",
remote: "請修正此欄位",
email: "請輸入有效的電子郵件",
url: "請輸入有效的網(wǎng)址",
date: "請輸入有效的日期",
dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
number: "請輸入正確的數(shù)字",
digits: "只可輸入數(shù)字",
creditcard: "請輸入有效的信用卡號碼",
equalTo: "你的輸入不相同",
extension: "請輸入有效的后綴",
maxlength: $.validator.format("最多 {0} 個字"),
minlength: $.validator.format("最少 {0} 個字"),
rangelength: $.validator.format("請輸入長度為 {0} 至 {1} 之間的字串"),
range: $.validator.format("請輸入 {0} 至 {1} 之間的數(shù)值"),
max: $.validator.format("請輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請輸入不小于 {0} 的數(shù)值"),
remoteMsg: '不能存在[0]'
}
}
})
$('.formSubmit').click(function(event) {
// 把前面驗證的FORM恢復(fù)到驗證前原來的狀態(tài)(即清楚錯誤狀態(tài))
formValid.resetForm();
console.log(formValid.form());
console.log(formValid);
console.log(formValid.invalid);
console.log(formValid.successList);
console.log(formValid.errorList);
// 觸發(fā)單個輸入驗證
$('input[name="inputName"]').valid();
});
})
