Rumah  >  Artikel  >  hujung hadapan web  >  详解jQuery validate插件

详解jQuery validate插件

PHP中文网
PHP中文网asal
2017-06-22 15:07:451420semak imbas

一、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(){
$(&#39;#demoForm&#39;).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:&#39;此项必填&#39;,
minlength:&#39;用户名最小是6位&#39;,
maxlength:&#39;用户名最大是9位&#39;
},
password:{
required:&#39;此项必填&#39;,
minlength:&#39;密码最小是6位&#39;,
maxlength:&#39;密码最大是9位&#39;
},
age:{
min:&#39;最小18岁&#39;,
max:&#39;最大80岁&#39;,
//range:&#39;年龄必须是18-80之间&#39;,
//                          rangelength:&#39;2-3位数&#39;,
digits:&#39;年龄必须是正整数&#39;
},
date:{
required:&#39;必填&#39;,
dateISO:&#39;日期格式不合法&#39;
}
}
})
})
</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。

Atas ialah kandungan terperinci 详解jQuery validate插件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn