关于jquery的表单验证插件 validation Plugin使用教程笔记
盖诚
最近在做小程序比较多，采用前后端分离的写法，所以比较依赖于前端。
再加上写大型项目的后台时，js也是至关重要。
所以，最近准备努力学习并掌握前端知识。
学了layui，学了表单验证，下步学bootstrap
注意啊，本教程依赖以下插件，插件源自于h-ui后台模板
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.min.js"></script> <div class="codeView docs-example">
<form action="" method="post" class="form form-horizontal" id="demoform-1">
<legend>表单布局</legend>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">用户名：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" id="name" name="name" autocomplete="off" placeholder="帐号">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">密码框：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="password" class="input-text" name="password" autocomplete="off" placeholder="密码">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">文本域：</label>
<div class="formControls col-xs-8 col-sm-9">
<textarea class="textarea" placeholder="说点什么..." rows="" cols="" name="text"></textarea>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="提交">
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
//在这里赋值
var validator = $('#demoform-1').validate({
debug:true, //开启提交表单那不会被提交，便于调试
// onsubmit:false, //是否在提交时验证
// onfocusout:true, //是否在获取焦点时验证
// onkeyup:true, //是否在敲击键盘时验证
// onlick:true, //是否在鼠标点击时验证
// focusIvalid:true, //提交表单后，未通过验证的表单是否会获得焦点
// focusCleanup:true, //当未通过验证的元素获得焦点时，是否移除错误提示
rules:{
name:{
// postcode:true,
required:true, //必须填写
// required:{
// depends:function(){
// //定义验证条件
// //举例密码是否被填写
// return $('#password').is(':filled');
// }
// }
minlength:2,
// minlength:{
// //对于值不是true和false的，请加param
// param:2,
// depends:function(){
// return $('#password').is(':filled');
// }
// }
maxlength:10,
// rangelength:[2,10] 长度范围
// min:10 //针对数字，还有max和range 必须是数字，在验证长度和范围
// remote:"/remote.json", //远程校验地址
// date:true //2011-11-11 11:11:20 校验格式宽松，可以是很多种
// dateISO:true //时间必须是2018-11-11
// email:true //邮箱格式
// url:true //url格式。注意必须带http://
// number:true //必须是数字，包含浮点和负数
// digits:true //必须是正整数，包含0
// "confirm-password":{ //校验两个表单值是否相等，注意name包含-需要加引号
// equalTo:"#password", //后跟选择器
// }
// remote:{ //自定义远程参数
// url:"",
// type:"post",
// data:{
// loginTime:function(){
// return + new Date; //+是老师讲解的技巧，转化成数字什么
// }
// }
// }
},
password:{
required:true,
}
},
//校验当前提交是否正确使用如下
// 举例一个点击事件元素id=check
// $('#check').click(function(){
// $('#demoform-1').valid(); //表单输入校验正确是true，不正确是false
// });
//成功后的执行
// submitHandler:function(form){
// console.log($(form).serialize());
// //或者在这里执行$.ajax
// },
// //无效的执行
// invalidHandler:function(event,validator){
// //比如打印出来错误数量
// console.log('错误数'+ validator.numberOfInvalids());
// //在这里说明下，我们也可以在$('#demoform-1').validate方法外部使用如下来触发
// // $('#demoform-1').on('invalid-form', function(event,validator) {
// // console.log('错误数'+ validator.numberOfInvalids());
// // });
// },
//ignore:"#name" //对某些元素不做验证，选择器，有默认值，默认值为对:hidden不做验证
// errorClass:"wrong", //指定错误提示的css类名
// validClass:"success", //指定验证通过的css类名
// errorContainer:"#wrong", //显示或者隐藏验证信息，可以自动实现有错误信息出现时把手容器属性变为显示，无错误时隐藏
// errorLabelContainer:"#info",//将错误信息统一放在一个容器里面
// wrapper:'ul', //使用什么标签把下边的错误元素包括
// errorElement:"li", //使用什么标签标记错误
//显示错误条数及错误信息
// showErrors:function(errorMap,errorList){
// console.log(errorMap); //{name: "必填信息", password: "必填信息"}
// console.log(errorList); 显示为数组，更详细0:{message: "必填信息", element: input#name.input-text, method: "required"} 1:{message: "必填信息", element: input.input-text, method: "required"}
// // this.defaultShowErrors(); //显示默认提示方式，表单报错，
// }
// success:'right', //给验证通过后的表单加上class=right样式，当然也可以向如下方式设置成一种方法
// success:function(label){
// label.addClass('right');
// }
//注意，highlight 和unhighlight同时使用
//给未通过验证的元素加效果
// highlight:function(element,errorClass,validClass){
// $(element).addClass(errorClass).removeClass(validClass);
// //加入断进断出效果
// $(element).fadeOut().fadeIn();
// },
// //去除通过验证的元素效果，一般和highlight同时使用
// unhighlight:function(element,errorClass,validClass){
// $(element).addClass(validClass).removeClass(errorClass);
// }
//选择器扩展，配合jquery
// $(':blank') 去除半角空格
//:blank 选择所有值为空的元素，：filled选择所有值不为空的元素 :unchecked 选择所有没有被选中的元素，常用复选框
}); //validate方法结尾符
//自定义验证方法,在上面的rule里填写postcode
$.validator.addMethod("postcode",function(value,element,params){
//正则表达式
var postcode = /^[0-9]{6}$/;
//注意，this.optional(element)代表表单不为空的时候才做验证，如果不写此方法，则代表必填
return this.optional(element) || (postcode.test(value));
//关于参数，可以在rule里postcode:'中国',然后将请填写正确的邮箱替换为$.validator.format("请填写正确的{0}邮箱");
//{0}会被替换成中国，当然如果postcode:定义不是true，而有值时，形参params的值就是该值
},'请填写正确的邮箱');
//获取元素规则，注意，这里只能通过元素来获取,就是id，不能通过其他方式，比如:$("input[name='name']");
// $('#name').rules() //获取当前表单规则
// $('#name').rules("add",{minilength:2,maxlength:10}); // 增加校验规则
// $('#name').rules('remove','email'); // 删除一个规则,如果删除多个请使用空格在第二参数分开
//上面定义了值 var validator 之后
// validator.form()为验证当前表单是否有效，true或false
// validator.element('#name'); //为验证表单的某个元素是否有效
// validator.resetForm() //将表单恢复到验证前的状态
// validator.showErrors({nme:"你填错了,hoho"}) //针对某个元素显示特性的错误信息
// validator.numberOfInvalids() //返回无效的元素数量
</script>更多规则前往： http://www.h-ui.net/Hui-3.4-form.shtml
类似资料：