jQuery技术

jQuery Validate(其实JQuery的详细教程也在这了)(3)

字号+ 作者:H5之家 来源:H5之家 2017-02-17 18:03 我要评论( )

一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。 errorContainer: div.error,errorLabelContainer: $(#signupForm div.error),wrapper: li 5、更改错误信息显示的样式

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

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,否则别乱添加。

触发方式 类型 描述 默认值

onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true

onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮)。 true

onkeyup Boolean 在 keyup 时验证。 true

onclick Boolean 在点击复选框和单选按钮时验证。 true

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

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

// 重置表单 $().ready(function() { var validator = $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); $("#reset").click(function() { validator.resetForm(); }); }); 8、异步验证 remote:URL

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

remote: "check-email.php" remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }

远程地址只能输出 "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)); }, "请正确填写您的邮政编码");

注意 :要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

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

10、radio 和 checkbox、select 的验证

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery Selector选择器小结

    jQuery Selector选择器小结

    2017-02-18 10:12

  • nodejs HTML分析利器node

    nodejs HTML分析利器node

    2017-02-17 17:03

  • jQuery.Deferred对象

    jQuery.Deferred对象

    2017-02-17 13:01

  • 《jQuery实战(第三版)》(Bear Bibeault)【摘要

    《jQuery实战(第三版)》(Bear Bibeault)【摘要

    2017-02-17 13:00

网友点评