jquery validate插件教程
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery validate插件教程相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>validate</title> 6 <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> 7 <script type="text/javascript" src="js/jquery.validate.js" ></script> 8 <script type="text/javascript"> 9 10 $(function(){ 11 var vali=$("#testForm").validate({ 12 rules:{ 13 user:{ 14 required:true, 15 // minlength:2, 16 // maxlength:10, 17 rangelength:[2,10],//长度范围 18 // remote:"jsonT/data.txt",//远程校验 19 // url:true,//url格式 20 // email:true,//邮箱格式 21 date:true,//日期格式 22 // dateISO:true,//标准日期格式yyyy-mm-dd 也可用/ 23 // digits:true,//非负的整数 24 // number:true, 25 }, 26 pass:{ 27 required:true, 28 // minlength:2, 29 // maxlength:10, 30 // remote:{ 31 // url:"", 32 // type:"post", 33 // data:{ 34 // 35 // } 36 // } 37 }, 38 passre:{ 39 equalTo:"#mima",//必须和谁相等 40 } 41 }, 42 43 messages:{ 44 user:{ 45 required:"必须填写用户名", 46 minlength:"用户名最小为2位", 47 maxlength:"用户名最大长度为10位" 48 }, 49 pass:{ 50 required:"必须填写密码", 51 minlength:"密码长度最小为2位", 52 maxlength:"密码长度最大为10" 53 } 54 } 55 56 }); 57 58 vali.showErrors({ 59 pass:"你填错了", 60 user:"哟普你不用户名错了", 61 }) 62 63 $("#check").click(function(){ 64 alert($("#testForm").valid()?"填写正确":"填写错误"); 65 }) 66 67 68 69 // $("#mima").rules("add",{})//添加规则 70 /** 71 * validate()方法会返回validate对象,此对象的方法: 72 * validate.form()//验证表单是否有效 73 * validate.element(selector)验证元素是否有效 74 * validate.resetForm()回到验证之前的状态 75 * validate.showErrors(options)//错误信息 76 * validate.numberOfInvalids()//返回无效信息的个数 77 * 78 * 静态方法 $.validator.format("{0}-{1}-{2}");占位符 79 * 例: var temp=$.validator.format("{0}-{1}-{2}"); 80 * temp("ni ","w","ta"); 81 * $.validator.setDefaults();//设置默认设置 82 * $.validator.setDefaults(function(){ 83 * debug:true, 84 * }) 85 * 86 * classMing添加规则、、 87 * $.validator.addClassRules() 88 * $.validator.addClassRules({ 89 * aaa:{ 90 * //规则 91 * } 92 * }) 93 * 94 * validate()中配置项// 95 * 提交时验证通过触发的 96 * submitHandler:function(aa){ 97 * 98 * } 99 * 验证为通过触发 100 * invalidHandler:function(event,validator){ 101 * 102 * } 103 * invalid-form事件 104 * 105 * ignore:"selector"//忽略验证的元素 106 * 107 * 在规则中可以使用depends属性来决定此规则是否生效，属性值返回true才进行此属性校验 108 * 109 * groups:{}//用来将要元素的错误信息元素存放进去 110 * groups:{ 111 * login："user pass" 112 * }//用来将要元素的错误信息元素存放进,跟errorPlacement:function(error,element){}一块使用 113 * 114 * error 为错误信息 115 * error.insertBefore();//存放位置 116 * 117 * onsubmit 、 onfocusout（是否在获取焦点时验证）、onkeyup、onclick（点击时验证、一般用在复选框或单选） 118 * focusInvalid 验证未通过的信息是否获取焦点、focusCleanup未通过验证的信息是否在获取焦点时移除错误信息 119 * 120 * errorClass:"" 错误提示的class名 自定义样式 121 * validClass:"" 122 * 123 * errorElement: 用什么标签标记错误 124 * wrapper: 用什么标签将上面标签包裹 125 * errorLabelContainer 用容器将错误信息统一存储 126 * errorContainer 显示或隐藏验证信息，可以自动在有错误是显示容器，没有时隐藏 127 * 128 * showErrors:function(errorMap,errorList){//errorMap显示的只有错误的信息 ，errorList存放的更详细 ，存储的是对象 129 * 130 * this.defaultErrors();//默认信息 131 * } 132 * 133 * sucess:""//通过的元素添加class名 如果为函数 参数为通过的元素 针对label元素 134 * 135 * highlight:function(element,errorClass,validClass){}//可以给为通过验证的元素添加效果 针对input元素 136 * unhighlight:function(element,errorClass,validClass){}//验证未通过去除效果 137 * 138 * //选择器扩展 :blank值为空 :filled不为空 :unchecked未选中 139 * 140 * 141 * ================================================================================== 142 * 143 * 自定义验证方法 144 * $.validator.addMethod(name,method[,message]); name为方法名称例如 postcode 145 * 146 */ 147 148 149 150 }); 151 152 153 </script> 154 </head> 155 <body> 156 157 <form id="testForm"> 158 159 用户名<input type="text" placeholder="请输入用户名" name="user"/> 160 密码<input type="password" id="mima" name="pass"/> 161 确认密码<input type="password" name="passre"/> 162 <input type="submit" /> 163 <input type="button" id="check" /> 164 </form> 165 166 167 </body> 168 </html>
以上是关于jquery validate插件教程的主要内容，如果未能解决你的问题，请参考以下文章
表单验证——jquery validate使用说明另一个教程