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="查看表单是否验证通过" οnclick="isFormValid();"/>
<input type="button" value="查看表单Name组件的校验规则" οnclick="showFormRules();"/>
</p>
</form>
<div id="summary"></div>
</body>
</html>
2.参考资料
http://jqueryvalidation.org/documentation/
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
