首页 > 代码库 > jquery validate插件教程

jquery validate插件教程

2024-08-12 01:48:34   211人阅读

  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为方法名称例如 postcode145 * 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插件教程


联系
我们