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验证插件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-1.14.0：前端验证利器详解》 jQuery-validation 是一个广泛使用的JavaScript库，专门用于实现前端表单验证。1.14.0版本在2015年9月13日发布，它提供了强大的功能，帮助开发者轻松地创建具有...
此外，为了获取更详细的使用教程和了解更多高级功能，可以访问相关博主的博客或其他在线资源，那里通常会包含详细的配置选项、方法、插件设置以及示例代码，帮助开发者深入理解并充分利用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元素中，或者使用特定的模板来呈现。`...