具體細節請查看菜鳥教程。這裏只是記錄使用Validate的步驟。
validate文檔，主要注意自定義校驗與內置相關函數
這個例子主要包括Input/checkbox/passWords的簡單例子，但是對於Form的表單驗證類似：
第一步：引入相關js
第二步：準備Form 表單
第三步：書寫校驗規則(包括自定義的)
第四步：提交前進行校驗【利用Form函數()】
代碼粘出去，重新引入js文件，可以直接運行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form id="SimpleValidate">
<table class="frame">
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>主講老師：</th>
<td>
<input type="text" name="teacherInfo" id="teacherInfo"value="">
<span class="errorSpan"></span>
</td>
</tr>
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>郵編</th>
<td>
<input type="text" name="hiddenInput" id="hiddenInput" value="" />
<span class="errorSpan"></span>
</td>
</tr>
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>密碼</th>
<td>
<input type="text" name="passWord" id="passWord" value="" />
<span class="errorSpan"></span>
</td>
</tr>
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>確認密碼</th>
<td>
<input type="text" name="rePassWord" id="rePassWord" value="" />
<span class="errorSpan"></span>
</td>
</tr>
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>多選框</th>
<td>
<input type="checkbox" id="spam_email" value="email" name="checkBoxes"/>email
<input type="checkbox" id="spam_phone" value="phone" name="checkBoxes" />phone
<input type="checkbox" id="spam_mail" value="mail" name="checkBoxes" />mail
<span class="errorSpan"></span>
</td>
</tr>
<tr>
<th><span style="font-size: 15px; color: #FF0000">*</span>下拉框</th>
<td>
<select id="jungle" name="jungle" title="Please select something!">
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
<span class="errorSpan"></span>
</td>
</tr>
</table>
<button type="button" onclick="AjaxRequest()">校驗</button>
</form>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
//jquery validator 默認不驗證隱藏域，此行代碼打開
$.extend($.validator.defaults, {ignore: ""});
validateSimpleValidate();
});
// 提交之前進行驗證
function AjaxRequest(obj) {
if (validateSimpleValidate().form()) { //判斷校驗是否符合規則
// 符合規則進入後臺 ajax處理
}else{
// 不符合規則返回
return false;
}
}
//自定義校驗
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您的郵政編碼");
// 校驗規則
function validateSimpleValidate() {
simpleValidateResult= $("#SimpleValidate").validate({
rules: {
teacherInfo: {
required: true
},
hiddenInput: {
required: true,
isZipCode:true,
},
passWord: {
required: true,
minlength:2
},
rePassWord:{
required: true,
minlength:2,
equalTo: "#passWord"
},
checkBoxes: {
required:true,
minlength:2
},
jungle:{
required:true,
}
},
messages: {
teacherInfo: {
required: "主講老師不能爲空",
},
hiddenInput:{
required:"不能爲空",
},
passWord: {
required:"不能爲空",
minlength:"至少兩個"
},
rePassWord: {
required:"不能爲空",
minlength:"至少兩個",
equalTo:"請輸入相同的值"
},
checkBoxes: {
required:"不能爲空",
minlength:"至少選擇兩個"
},
jungle:{
required:"至少選擇一個",
}
},
errorPlacement: function (error, element) { // 自定義設置錯誤信息提示位置
error.appendTo(element.parent().find("span[class='errorSpan']"));
}
});
return simpleValidateResult;
}
</script>
</body>
</html>