jQuery Validate验证框架经典大全(4)

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", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }

远程地址只能输出"https://www.jb51.net/article/true"或"false",不能有其它输出。

9、添加自定义校验

addMethod:name, method, message

自定义验证方法

// 中文字两个字节 jQuery.validator.addMethod( "byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || (length >= param[0] && length <= param[1]); }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)") ); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");

1.要在additional-methods.js文件中添加或者在jquery.validate.js添加

建议一般写在additional-methods.js文件中

2.在messages_cn.js文件添加:isZipCode: "只能包括中文字、英文字母、数字和下划线",调用前要添加对additional-methods.js文件的引用。

10、radio和checkbox、select的验证

1.radio的required表示必须选中一个

<input type="radio" value="m" /> <input type="radio" value="f"/>

2.checkbox的required表示必须选中

<input type="checkbox" /> checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间 <input type="checkbox" value="email" /> <input type="checkbox" value="phone" /> <input type="checkbox" value="mail" />

3.select的required表示选中的value不能为空

<select title="Please select something!"> <option value=""></option> <option value="1">Buga</option> <option value="2">Baga</option> <option value="3">Oi</option> </select>

select的minlength表示选中的最小个数(可多选的select),maxlength表示最大的选中个 数,rangelength:[2,3]表示选中个数区间

<select title="Please select at least two fruits" multiple="multiple"> <option value="b">Banana</option> <option value="a">Apple</option> <option value="p">Peach</option> <option value="t">Turtle</option> </select>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggzyg.html