你的位置:首页 > Java教程

[Java教程]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>