jquery插件 validation 学习
Posted oldcowstruggle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery插件 validation 学习相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validate</title> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="js/jquery.validate.js" ></script> <script type="text/javascript"> $(function(){ var vali=$("#testForm").validate({ rules:{ user:{ required:true, // minlength:2, // maxlength:10, rangelength:[2,10],//长度范围 // remote:"jsonT/data.txt",//远程校验 // url:true,//url格式 // email:true,//邮箱格式 date:true,//日期格式 // dateISO:true,//标准日期格式yyyy-mm-dd 也可用/ // digits:true,//非负的整数 // number:true, }, pass:{ required:true, // minlength:2, // maxlength:10, // remote:{ // url:"", // type:"post", // data:{ // // } // } }, passre:{ equalTo:"#mima",//必须和谁相等 } }, messages:{ user:{ required:"必须填写用户名", minlength:"用户名最小为2位", maxlength:"用户名最大长度为10位" }, pass:{ required:"必须填写密码", minlength:"密码长度最小为2位", maxlength:"密码长度最大为10" } } }); vali.showErrors({ pass:"你填错了", user:"哟普你不用户名错了", }) $("#check").click(function(){ alert($("#testForm").valid()?"填写正确":"填写错误"); }) // $("#mima").rules("add",{})//添加规则 /** * validate()方法会返回validate对象,此对象的方法: * validate.form()//验证表单是否有效 * validate.element(selector)验证元素是否有效 * validate.resetForm()回到验证之前的状态 * validate.showErrors(options)//错误信息 * validate.numberOfInvalids()//返回无效信息的个数 * * 静态方法 $.validator.format("{0}-{1}-{2}");占位符 * 例: var temp=$.validator.format("{0}-{1}-{2}"); * temp("ni ","w","ta"); * $.validator.setDefaults();//设置默认设置 * $.validator.setDefaults(function(){ * debug:true, * }) * * classMing添加规则、、 * $.validator.addClassRules() * $.validator.addClassRules({ * aaa:{ * //规则 * } * }) * * validate()中配置项// * 提交时验证通过触发的 * submitHandler:function(aa){ * * } * 验证为通过触发 * invalidHandler:function(event,validator){ * * } * invalid-form事件 * * ignore:"selector"//忽略验证的元素 * * 在规则中可以使用depends属性来决定此规则是否生效，属性值返回true才进行此属性校验 * * groups:{}//用来将要元素的错误信息元素存放进去 * groups:{ * login："user pass" * }//用来将要元素的错误信息元素存放进,跟errorPlacement:function(error,element){}一块使用 * * error 为错误信息 * error.insertBefore();//存放位置 * * onsubmit 、 onfocusout（是否在获取焦点时验证）、onkeyup、onclick（点击时验证、一般用在复选框或单选） * focusInvalid 验证未通过的信息是否获取焦点、focusCleanup未通过验证的信息是否在获取焦点时移除错误信息 * * errorClass:"" 错误提示的class名 自定义样式 * validClass:"" * * errorElement: 用什么标签标记错误 * wrapper: 用什么标签将上面标签包裹 * errorLabelContainer 用容器将错误信息统一存储 * errorContainer 显示或隐藏验证信息，可以自动在有错误是显示容器，没有时隐藏 * * showErrors:function(errorMap,errorList){//errorMap显示的只有错误的信息 ，errorList存放的更详细 ，存储的是对象 * * this.defaultErrors();//默认信息 * } * * sucess:""//通过的元素添加class名 如果为函数 参数为通过的元素 针对label元素 * * highlight:function(element,errorClass,validClass){}//可以给为通过验证的元素添加效果 针对input元素 * unhighlight:function(element,errorClass,validClass){}//验证未通过去除效果 * * //选择器扩展 :blank值为空 :filled不为空 :unchecked未选中 * * * ================================================================================== * * 自定义验证方法 * $.validator.addMethod(name,method[,message]); name为方法名称例如 postcode * */ }); </script> </head> <body> <form id="testForm"> 用户名<input type="text" placeholder="请输入用户名" name="user"/> 密码<input type="password" id="mima" name="pass"/> 确认密码<input type="password" name="passre"/> <input type="submit" /> <input type="button" id="check" /> </form> </body> </html>
以上是关于jquery插件 validation 学习的主要内容，如果未能解决你的问题，请参考以下文章
jQuery基础学习06 jQuery表单验证插件-Validation