jQuery Validate验证框架详解(推荐)

2020-05-27 17:58:30易采站长站整理

errorContainer: “#messageBox1, #messageBox2”

errorLabelContainer:Selector

把错误信息统一放在一个容器里面。

wrapper:String

用什么标签再把上边的errorELement包起来

一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏


errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5、更改错误信息显示的样式

设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式


input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6、每个字段验证通过执行函数

success:String,Callback 要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数


success: function(label) {
// set   as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}

添加”valid”到验证元素, 在CSS中定义的样式<style>label.valid {}</style> success: “valid”

7、验证的触发方式修改

下面的虽然是boolean型的,但建议除非要改为false,否则别乱添加。

a.onsubmit:Boolean Default: true 提交时验证. 设置唯false就用其他方法去验证

b.onfocusout:Boolean Default: true 失去焦点是验证(不包括checkboxes/radio buttons)

c.onkeyup:Boolean Default: true 在keyup时验证.

d.onclick:Boolean Default: true 在checkboxes 和 radio 点击时验证

e.focusInvalid:Boolean Default: true 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点

f.focusCleanup:Boolean Default: false 如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和focusInvalid一起用

8、异步验证

remote:URL

使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项

示例一:


remote: "check-email.php"

示例二:


remote: {
url: "check-email.php", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式