您好,欢迎访问一九零五行业门户网

详解jQuery validate插件

一、validate插件描述
   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,将调用默认的信息
默认校验规则:
1 required:true 必须输入的字段。
2 remote:check.php 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateiso:true 必须输入正确格式的日期(iso),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalto:#field 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。
以上就是详解jquery validate插件的详细内容。
其它类似信息

推荐信息