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() //获取该元素的验证方法 這个是不带参数的
(“#元素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的方法配置选项 谢谢大家