使用jquery自带的表单验证功能，需要先引入validator.js 和 jquery.js
下面有validator的属性和方法，代码里面我做了详细的注释。
这个版本的是正常的form表单提交的，下一个记录的是ajax的提交
html部分
<form id="testForm" action="http://localhost:8083/hhh" method="POST">
姓名1<input type="text" name="sname" /> </br>
姓名2<input type="text" name="bname" /></br>
姓名3<input type="text" name="cname" class="class_cname" />
</br>
<input type="submit">
<!-- 此处的ajax提交是做ajax提交的按钮，form表单请忽略下面按钮 -->
<button id="ajaxbtn">ajax提交</button>
</form>
js
<script src="./jquery.js"></script>
<script src="./validator.js"></script>
<script>
$("#testForm").validate({
onkeyup: null, //失去焦点，进行验证
ignore: ":hidden, .ignore", //忽略验证的元素
wrapper: 'ul', //包裹错误标签的容器
errorElement: "li", //错误的标签名字
// debug: true, //测试专用属性，可以放置表单跳转
rules: { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式)
sname: { //这里的sname 指的是上面标签的name属性
required: true, //必填。如果验证方法不需要参数，则配置为true
mobile: true //这里是自定义的验证规则，true标签开始匹配
},
bname: {
required: true,
mobile: true
}
},
messages: { // 验证失败的提示信息
sname: { //这里的sname 指的是上面标签的name属性
required: "专属于A的必选值" //自定义required的错误信息内容
},
cname: {
mobile: "专属于3的手机验证"
}
},
errorPlacement: function(error, element) { // 验证失败调用的函数
error.addClass("error_tip"); // 提示信息增加样式
if (element.prop("type") === "checkbox") {
error.insertAfter(element.parent("label")); // 待验证的元素如果是checkbox，错误提示放到label中
} else {
error.insertAfter(element);
}
}
})
//可以以extend的形式进行也，也可以通过message的形式进行更改错误信息的内容
//这里的层级没有上面，messages的层级高，即 messages层级 > $.extend层级 > addClassRules层级
$.extend($.validator.messages, {
required: "我可以在a和b和c里面验证必选值",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
minlength: "最小长度为2",
});
//通过添加类名的方式增加条件验证信息
jQuery.validator.addClassRules({
class_cname: {
required: true,
mobile: true
}
});
//自定义验证的规则，这个得"mobile",指得是上面rule得规则，
$.validator.addMethod("mobile", function(value, element, param) {
var reg = /^1[34578]\d{9}$/; //正则表达式验证
return reg.test(value);
}, "请输入正确的手机号");
// form表单提交的方式
$('#testForm').submit(function() {
// 验证form表单是否通过验证，如果通过这位ture 否则，终止代码执行
var flag = $('#testForm').valid();
console.log(flag);
if (!flag) {
console.log('表单验证失败')
return
} else {
console.log('表单验证成功')
}
})
</script>
