Jquery validate 静态方法和常用方法的使用

valid方法使用介绍：

            <!-- jsp代码片段 主要是两个文本框一个按钮 -->
            <form id="formID"action="login.spring" method="get">
                用户名:<input type="text" name="username" id="username" ><br><br>
                密码:<input type="text" id="userpassword" name="userpassword" ><br><br>
            确认密码:<input type="text" id="cofiguserpassword" name="cofiguserpassword" ><br><br>
                    <input type="submit" value="增加">
                    <input type="button" id="inspectForm" value="检查表单">
            </form>


**下面为JS代码：**
            var validate =  $("#formID").validate({
                    rules:{
                          username:{
                          required:true//是否必填验证 true是必须填写 false文本框可以不用填写
                          }
                      },

                    //提示信息
                    messages:{
                            username:{
                                        required:"请输入账号"
                                    },
                            }
                    });

                $("#inspectForm").click(function(){
                    alert($("#formID").valid()?"表单正确":"表单错误");
                    });
                });

這个方法能对我们的form表单进行验证 如果验证通过就返回true 如果有一个验证没有通过则返回false

我们点击 检查表单 在不输入用户名的情况下会提醒我们 表单错误

下面我们介绍下rules的用法
$(“#元素ID”).rules() //获取该元素的验证方法 這个是不带参数的$(“#元素ID”).rules(‘add’,{minlength:2,maxlength:10}); 动态的为元素添加验证方法
$(“#元素ID”).rules(‘remove’,{minlength maxlength}); 动态的为元素删除验证方法中间用空格 隔开
下面我们介绍下validator对象
validator.form();方法 验证表单是否有效果返回true或则false
$(“#inspectForm”).click(function(){
alert(validate.form());
});

這个方法和valid类似 這个是专门验证表单的 validator方法返回的就是validator对象使用一个变量接就好了 如果有任何验证不通过则返回false 否则全部通过返回true

var validate = $(“#formID”).validate(）

validator.element();方法 刚刚我们看到验证整个表单的现在我们看看验证单个元素的方法
因为我们验证form的时候 validatoor对象本身就包含了所有表单提交信息 但是在验证元素的时候我们
要传需要验证的元素的选择器
$(“#inspectForm”).click(function(){
alert(validate.element(“#username”));
});

//這里 我们使用了检查表单按钮的点击事件调用了validate.element()方法传入userName文本框进行了验证
如果验证通过返回true否则返回false

validator.resetForm();方法
把表单恢复到验证之前的状态 意思为清楚原来的文本框错误状态返回 没有进行验证之前的 再次验证，再次触发验证规则
validator.showErrors();方法
只要验证出错 就能输出我们添加的错误信息 注意这里的出错 包括所有验证不通过的情况
$(“#inspectForm”).click(function(){
validate.showErrors({
username:”填写错了 哈哈哈”
});
});
validator.numberOfInvalids();方法
检查无效的元素数量 意思为返回没有通过验证的元素的个数
$(“#inspectForm”).click(function(){

  alert(validate.numberOfInvalids());
});

下面我们来看看validator的一些静态方法吧

第一个静态方法 format方法 格式化字符串
var template = $.validator.format(“{0}–{1}–2”);
可以传入alert( template(“123”,”123”,”123”));我们打印出来
也可以传入一个数组alert( template([“123”,”123”,”123”]));

validator.setDefaults()
修改validator的默认选择项
比如我们有很多个form表单可以通过
validator.setDefaults(){debug:true}
给所有的form加上debug属性

validator.addClassRules()方法

$(function(){
            //获取form表单元素对象使用validate方法
             $("#formID").validate({
                //加入debug=true; 可以进入调试状态不会不会请求服务器 只在页面进行验证调试
                 //debug:true,
                 //rules要验证的元素包裹进rules中
                rules:{
                 },
                //提示信息
                messages:{
                    username:{
                        required:"傻逼输入错了"
                    },
                    userpassword:{required:"请输入密码"}
                }
            });

            $("#inspectForm").click(function(){
                //点击检查按钮通过clss为用户文本框和密码框添加验证规则
                  $.validator.addClassRules({
                    itm:{
                        required:true
                    }
                 });
            });

“`

通过class添加验证规则成功 這个方法为我们提供了批量设置元素验证规则的功能

今天就到这 下一章我们来看看validator的方法配置选项 谢谢大家