1.options-validate.html
<html> <head> <meta charset="UTF-8" /> <script src="jquery-1.6.4.js" type="text/javascript"></script> <script src="jquery.validate.min.js" type="text/javascript"></script> <style> .warning { color: red; } .success { color: green; } .valid { color: green; } </style> <script language="javascript"> <!-- $(function(){ $("#validate").validate({ //如果为true,表单不会提交,而且会在控制台显示一些错误消息(需要Firebug或者Firebug lite) //debug: true, //当表单通过验证,不提交表单,而是调用这个回调函数 submitHandler: function(form) { $("#msg").html("提交表单"); //不能使用$(form).submit();这个方法会触发另一次validatation,会使程序陷入死循环 form.submit(); }, //当未通过验证的表单提交时,调用这个回调函数 invalidHandler: function(event, validator) { $("#msg").html("共有" + validator.numberOfInvalids() + "个组件验证错误"); }, //使用了jQuery.not()过滤指定选择器的组件,不进行校验 //类型为submit和reset的组件总是被忽略的,还有disabled的组件 //ignore: ".ignore", //用户定义的键/值对规则。 //键为一个组件元素的 name属性(或是一组单选/复选按钮)。 //值为一个简单的字符串或者由规则/参数对(rule/parameter)组成的一个对象。 //可以和 class/attribute/metadata 规则一起使用。每个规则可以指定一个依存的验证前提条件。 rules: { name: { required: true, rangelength: [8, 20] }, password: { required: true, rangelength: [8, 20] }, passwordConfirm: { required: true, rangelength: [8, 20], equalTo: { param: "#password", depends: function(element) { return $("#password").val().length >= 8; } } }, firstName: "required", lastName: "required" }, //用户自定义的 键/值 对消息。 //键为一个组件元素的name属性,值为该组件元素将要显示的消息。 //该消息覆盖元素的title属性或者默认消息。 //消息可以是一个字符串或者一个回调函数。回调函数必须在验证器的作用域中调用,将规则参数作为回调函数的第一个参数, //将该组件元素作为回调函数的第二个参数,且必须返回一个字符串类型的 消息。 messages: { name: { required: "用户名不能为空", rangelength: function(params, element) { return "用户名长度必须在" + params[0] + "和" + params[1] + "之间"; } }, userName: "请输入用户姓名" }, //指定错误消息分组。 //一个组由一个任意的组名作为键,一个由空白符分割的组件元素name属性列表作为值。 //用errorPlacement定义组消息的存放位置。 groups: { userName: "firstName lastName" }, //自定义错误标签的显示位置。 //第一个参数:一个作为jQuery对象的错误标签,第二个参数为:一个作为jQuery对象的未通过验证的表单元素。 errorPlacement: function(error, element) { if (element.attr("name") == "firstName" || element.attr("name") == "lastName" ) { error.insertAfter("#lastName"); } else { error.insertAfter(element); } }, //提交时验证组件。当设置为false时,只能用其它的事件验证。也可以设置为一回调方法。 //onsubmit: false //焦点离开时验证(单选/复选按钮除外)。 //如果组件中没有输入任何内容,所有的规则将被跳过,除非该组件已经被标记为无效的。 //也可以设置为一回调方法,方法有两个参数element和event //onfocusout: false, //当键盘按键弹起时验证。 //只要组件元素没有被标记成无效的,不会有反应。否则,所有的规则将在每次按键弹起时验证。 //也可以设置为一回调方法,方法有两个参数element和event onkeyup: false, //当鼠标点击验证单选和复选按钮。 //也可以设置为一回调方法,方法有两个参数element和event //onclick: false //使用validator.focusInvalid()将焦点设置在最后一个有焦点的组件或者第一个验证不通过的组件 focusInvalid: false, //如果为true,当组件得到焦点时,移除在该组件上的errorClass并隐藏所有错误消息。 //避免与focusInvalid一起使用。 -- 与focusInvalid一起使用效果更好 focusCleanup: true, //错误消息和错误组件的样式 errorClass: "warning", //组件验证通过时的样式 //validClass: "success", //放置错误消息的元素类型,默认为label,使用for属性和对应的组件产生关联 //errorElement: "p", //用一个指定的元素将错误消息元素包围。 //与errorLabelContainer一起创建一个错误消息列表非常有用。 wrapper: "li", //错误消息元素的容器,用于将错误消息集中起来显示 //errorLabelContainer: "#error", //试不出效果 //errorContainer: "#errorContainer", //自定义消息显示的句柄。 //该回调函数有两个参数,第一个为errorMap,第二个参数为errorList,在validator对象的上下文中调用。 //参数只包含那些经过onblur/onkeyup验证的表单元素,也有可能是单个元素。 //除此之外,你还可以用this.defaultShowErrors()触发默认的行为。 /* showErrors: function(errorMap, errorList) { $("#summary").html("共有" + this.numberOfInvalids() + "个组件验证错误"); this.defaultShowErrors(); } */ //如果指定它,当验证通过时显示一个消息。 //如果是String类型的,则添加该样式到标签中,如果是一个回调函数,则参数为标签(JQuery对象)和对应的组件(DOM对象) /* success: function(label, input) { label.addClass("valid").text($(input).val() + " is Ok!"); } */ //如何高亮显示错误组件 //默认为添加errorClass //三个参数,第一个错误组件(DOM对象),第二个errorClass,第三个validClass /* highlight: function(input, errorClass, validClass) { $(input).removeClass(validClass).addClass(errorClass); } */ //和highlight操作相反,参数一致 /* unhighlight: function(input, errorClass, validClass) { $(input).removeClass(errorClass).addClass(validClass); } */ //设置它用来跳过错误消息对title属性的引用,避免Google工具栏引起的冲突。 //ignoreTitle: true }); }); function isFormValid() { alert($("#validate").valid()); } function showFormRules() { alert($("#name").rules()); } --> </script> </head> <body> <p id="msg"></p> <div id="errorContainer"></div> <div id="error"></div> <form id="validate"> <p> NAME(Required,8-20): <input type="text" id="name" name="name" /> </p> <p> PASSWORD(Required,8-20): <input type="text" id="password" name="password" title="请输入密码,长度为8-20"/> </p> <p> PASSWORD-CONFIRM(Required,8-20,equalTo:#password): <input type="text" id="passwordConfirm" name="passwordConfirm" /> </p> <p> FIRST NAME(Required): <input type="text" id="firstName" name="firstName"/> LAST NAME(Required): <input type="text" id="lastName" name="lastName"/> </p> <p> ZipCode(Required): <input type="text" id="zipCode" name="zipCode" /> </p> <p> <input type="submit" value="提交"/> <input type="button" value="查看表单是否验证通过" onclick="isFormValid();"/> <input type="button" value="查看表单Name组件的校验规则" onclick="showFormRules();"/> </p> </form> <div id="summary"></div> </body> </html>
2.参考资料
http://jqueryvalidation.org/documentation/
相关推荐
《jQuery-validation-1.14.0:前端验证利器详解》 jQuery-validation 是一个广泛使用的JavaScript库,专门用于实现前端表单验证。1.14.0版本在2015年9月13日发布,它提供了强大的功能,帮助开发者轻松地创建具有...
《jQuery验证插件jQuery-validation-1.19.1详解》 jQuery-validation是Web开发中常用的客户端表单验证插件,其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了...
《jQuery验证插件详解——基于jquery-validation-1.11.1.zip的探索》 jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作,事件处理和动画制作等任务。而`jquery-validation`则是jQuery生态中的一款强大...
此外,为了获取更详细的使用教程和了解更多高级功能,可以访问相关博主的博客或其他在线资源,那里通常会包含详细的配置选项、方法、插件设置以及示例代码,帮助开发者深入理解并充分利用jQuery-validation插件。...
该插件有两个版本出现在压缩包中:`jquery-validation-1.17.0.zip`和`jquery-validation-1.14.0.zip`。这两个版本代表了插件的不同迭代,1.17.0是较新的版本,可能包含更多的优化和新特性,而1.14.0则是一个较旧但...
《jQuery Validation插件详解及其1.13.1版本特性》 jQuery Validation插件是用于JavaScript的客户端验证库,它极大地简化了网页表单的验证过程。这个插件以其易于使用、高度可定制化和丰富的功能集而广受欢迎。本文...
jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言
《jQuery Validation插件详解——基于jquery-validation-1.8.1实例分析》 在Web开发领域,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端处理的压力。jQuery ...
表单验证JQ插件jquery-validation.js
总结,jQuery Validation Engine是一款强大的表单验证工具,它通过直观的API和灵活的配置选项,使开发者能够轻松创建功能完善的、用户体验优秀的表单验证。通过理解其核心概念、安装步骤和用法,您可以将这一优秀...
本篇文章将围绕"jquery-validation-1.8.0"这一版本进行详细介绍,并探讨其核心功能、使用方法以及常见应用场景。 一、jQuery Validation插件概述 jQuery Validation插件是基于jQuery库的一个扩展,它使得在网页中...
**jQuery Validation 插件详解** jQuery Validation 是一个广泛使用的前端JavaScript库,专为简化HTML表单验证而设计。它提供了一套完整的功能,使开发者能够快速有效地实施表单验证,确保用户输入的数据满足预设的...
**jQuery Validation 插件详解** jQuery Validation 插件是一款强大且灵活的JavaScript工具,它专为简化HTML表单验证而设计。这个插件基于广泛使用的jQuery库,使得在网页开发中实现用户输入验证变得轻而易举。其...
6. **无侵入式(Unobtrusive)**:提及的"jquery-validation-unobtrusive-master"可能指的是jQuery Validation的无侵入式版本,它与ASP.NET MVC框架结合使用,通过数据注解实现服务器端和客户端验证的一致性。...
《jQuery Validation插件详解——基于版本1.17.0》 jQuery Validation是Web开发中一个广泛使用的JavaScript库,主要用于表单验证。该插件以其简单易用和强大的功能著称,大大简化了前端数据验证的过程。在本文中,...
总结来说,jQuery Validation Plugin 1.15.0是一个强大的客户端表单验证工具,它简化了验证逻辑,提供了灵活的配置和扩展性,是开发Web应用时不可或缺的辅助工具。通过了解其主要功能、核心文件和使用步骤,开发者...
二、jQuery Validation Plugin:强大的表单验证工具 jQuery Validation Plugin是jQuery的一个插件,专门用于处理Web表单的验证。它简化了原本繁琐的JavaScript验证代码,提供了一套完整的验证规则和自定义错误消息...
**jQuery Validation插件详解** jQuery Validation插件是用于在网页表单验证中提供方便、强大的功能的工具。它简化了对用户输入数据的检查,确保数据的完整性和正确性,从而提高了用户体验。这个插件是基于jQuery库...
3. **设置验证规则**:通过 `class` 或 `data-validation-engine` 属性为表单元素指定验证规则。例如: ```html [required,custom[email]]" /> ``` 4. **处理提交**:在表单的 `onsubmit` 事件中,使用 `....
其次,我们可以通过jQuery-validation的选项和方法来定制验证行为。例如,`errorPlacement`函数可以让我们决定错误消息在页面上的位置。我们可能希望将错误信息插入到特定的HTML元素中,或者使用特定的模板来呈现。`...