详解jQueryvalidate插件

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

二、配置方法

需要先导入Jquery库，然后导入Validate插件。而且两个插件有一定的先后顺序。（jquery库-Validate插件）

<script type="text/javascript" src="js/jquery-1.9.1.js?1.1.10" ></script>
<script type="text/javascript" src="js/jquery.validate.min.js?1.1.10" ></script>

js代码如下：

<script type="text/javascript">
$(function(){
$('#demoForm').validate({
rules:{
//指的是input 的 name的名字
username:{
required:true,
minlength:6,
maxlength:9
},
password:{
required:true,
minlength:6,
maxlength:9
},
age:{
min:18,
max:80,
//range:[18,80],
//r                         angelength:[2,3],
digits:true
},
date:{
required:true,
dateISO:true,
}
},
messages:{
username:{
required:'此项必填',
minlength:'用户名最小是6位',
maxlength:'用户名最大是9位'
},
password:{
required:'此项必填',
minlength:'密码最小是6位',
maxlength:'密码最大是9位'
},
age:{
min:'最小18岁',
max:'最大80岁',
//range:'年龄必须是18-80之间',
//                          rangelength:'2-3位数',
digits:'年龄必须是正整数'
},
date:{
required:'必填',
dateISO:'日期格式不合法'
}
}
})
})
</script>

html代码如下：

<form id="demoForm">
<p>
<label for="user">username</label>
<input type="text" name="username" id="user"/>
</p>
<p>
<label for="pass">password</label>
<input type="text" name="password" id="pass"/>
</p>
<p>
<label for="age">age</label>
<input type="text" name="age" id="age"/>
</p>
<p>
<label for="date">date</label>
<input type="text" name="date" id="date"/>
</p>
<p>
<input type="submit" value="提交" id="btn"/>
</p>
</form>

解释一下代码：

$('#demoForm').validate({})表单元素来调用validate

rules：返回元素的验证规则 ，默认提示的错误信息是英文的

messages 处，可以自定义规则，如果某个控件没有 message，将调用默认的信息

默认校验规则：

以上就是详解jQuery validate插件的详细内容，更多请关注Gxl网其它相关文章！