1.简介
JQuery-validate是基于JQuery的一个JS校验框架。
其中1.1.2依赖与JQuery1.7+
2.使用
1)input组件中通过属性来指定校验类型
--简单校验类型
data-required:必填,支持text,radio,checkbox,select等所有的组件
data-pattern:基于正则表达式的校验
data-trim:校验时是否去除前后空白
data-ignore-case:校验时大小写不敏感,默认为true
data-mask:
data-prepare:
--复杂校验类型
data-conditional:通过调用validate方法中的conditionnal参数中指定的方法进行校验,多个方法用空格分隔,每个方法需返回boolean类型的值。
data-validate:调用扩展的校验规则。
2)通过向jQuery.fn.validate(options)方法中传递options参数来设置校验特性
--普通参数
conditional:定义data-conditional的使用方法
filter:需要校验组件的选择器
nameSpace:
onBlur:失去焦点时触发该组件的校验,默认为false
onChange:值改变时触发该组件的校验,默认为false
onKeyup:keyup事件发生时触发该组件的校验,默认为false
onSubmit:表单提交时触发该表单的校验,默认为true
prepare:
sendForm:表单校验通过后是否自动提交,默认为true
waiAria:
--回调方法
valid:表单校验通过时调用,方法中this为该表单,提供两个参数event和options
invalid:表单失败通过时调用,方法中this为该表单,提供两个参数event和options
eachField:每个控件校验时调用,方法中this为该控件,提供三个参数event,status和options
eachInvalidField:每个控件校验失败时调用,方法中this为该控件,提供三个参数event,status和options
eachValidField:每个控件校验成功时调用,方法中this为该控件,提供三个参数event,status和options
3.错误描述
<form>
<input type="text" data-describedby="messages" data-description="test" />
<span id="messages"></span>
</form>
$('form').validate({
description : {
test : {
required : '<div class="error">Required</div>',
pattern : '<div class="error">Pattern</div>',
conditional : '<div class="error">Conditional</div>',
valid : '<div class="success">Valid</div>'
}
}
});
4.例子
1)简单校验类型
<html>
<head>
<meta charset="UTF-8" />
<title>Simple</title>
<script src="jquery-2.1.1.js"></script>
<script src="jquery-validate.min.js"></script>
<script language="javascript">
<!--
$(function(){
$("#simple").validate({
onBlur: true,
sendForm: false,
valid: function() {
alert("ajax request");
},
description: {
name: {
required: "请输入用户名",
pattern: "用户名仅能包含a-z的英文字母"
}
}
});
});
-->
</script>
</head>
<body>
<form id="simple">
<div>
<label>
用户名:
<input id="name" data-required data-trim data-ignore-case="false" data-pattern="^[a-z]+$"
data-describedby="messages" data-description="name"/>
<span id="messages"></span>
</label>
</div>
</form>
</body>
</html>
2)data-conditional
<html>
<head>
<meta charset="UTF-8" />
<title>data-conditional</title>
<script src="jquery-2.1.1.js"></script>
<script src="jquery-validate.min.js"></script>
<script language="javascript">
<!--
$(function(){
$("#simple").validate({
onBlur: true,
sendForm: false,
valid: function() {
alert("ajax request");
},
conditional: {
valid_name: function() {
var name = $.trim($(this).val());
if (name == "") {
return false;
}
if (!name.match(/^[a-z]+$/)) {
return false;
}
return true;
}
},
description: {
name: {
conditional: "用户名不能为空,并且仅能包含a-z的字母"
}
}
});
});
-->
</script>
</head>
<body>
<form id="simple">
<div>
<label>
用户名:
<input id="name" data-conditional="valid_name"
data-describedby="messages" data-description="name"/>
<span id="messages"></span>
</label>
</div>
</form>
</body>
</html>
3)data-validate
<html>
<head>
<meta charset="UTF-8" />
<title>data-conditional</title>
<script src="jquery-2.1.1.js"></script>
<script src="jquery-validate.min.js"></script>
<script language="javascript">
<!--
$(function(){
$("#simple").validate({
onBlur: true,
sendForm: false,
valid: function() {
alert("ajax request");
},
description: {
name: {
valid: "校验通过",
required: "请输入用户名",
pattern: "用户名仅能包含a-z的英文字母"
}
}
});
$.validateExtend({
valid_name: {
required: true,
pattern: /^[a-z]+$/
}
});
});
-->
</script>
</head>
<body>
<form id="simple">
<div>
<label>
用户名:
<input id="name" data-validate="valid_name"
data-describedby="messages" data-description="name"/>
<span id="messages"></span>
</label>
</div>
</form>
</body>
</html>
5.参考文档