具体细节请查看菜鸟教程。这里只是记录使用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>