版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/csdnluolei/article/details/83748020
Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
官方文档 http://jqueryvalidation.org/documentation/
也可以看看这里的，讲的也很详细 http://www.runoob.com/jquery/jquery-plugin-validate.html
测试demo
提示：要想改变提示信息的位置及样式，可以用浏览器查看修饰它的样式，自定义覆盖它。如提示信息默认字体是黑色的，重写类error，把字体改成红色了。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery validate -demo</title>
<style type="text/css">
.error{
color: red;
}
.content{
width:500px;
margin-left:100px;
border: solid 1px blue;
text-align: left;
padding-left: 50px;
}
</style>
</head>
<body>
<div class="content">
<h2>jquery validate -demo</h2>
<form id="submitForm">
联系人：<input type="text" id="contactPerson" name="contactPerson" /><br/><br/>
电话： <input type="text" id="mobile" name="mobile" /><br/><br/>
地址： <input type="text" id="address" name="address" /><br/><br/>
邮箱： <input type="text" id="email" name="email" /><br/><br/>
<input type="submit" id="submit" value="提交"/>
</form>
</div>
<!--jq-->
<script type="text/javascript" src="js/jquery.min.js" ></script>
<!--validate校验库-->
<script type="text/javascript" src="js/validate/jquery.validate.min.js" ></script>
<!--国际化库，中文提示-->
<script type="text/javascript" src="js/validate/messages_zh.min.js" ></script>
<!-- -->
<script type="text/javascript" >
$(function() {
$("#submitForm").validate({
rules: {
contactPerson: "required",
mobile: "required",
address: "required",
email: "required",
email:{
isEmail:true
},
mobile: {
isMobile:true
},
messages : {
mobile : {
isMobile : "请正确填写您的手机号码"
},
email : {
isEmail : "请正确填写您的邮箱地址"
}
}
},
submitHandler: function(form) { //通过之后回调
var p = $('#submitForm').serializeObject();
$.ajax({
type: "POST",
url: "/jsonapi/base/data.json",
dataType: 'json',
error: function(request) {
alert('添加失败');
},
success: function(result) {
console.log(result)
if(result.code == 0){
alert('保存成功');
} else {
alert(result.message);
}
}
});
},
invalidHandler: function(form, validator) { //不通过回调
return false;
}
});
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
//邮箱验证
jQuery.validator.addMethod("isEmail", function(value, element) {
var tel = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮箱");
});
</script>
</body>
</html>