Validate表单验证插件的基本使用
程序员文章站
2022-03-08 19:28:27
...
Validate是基于jQuery的一款轻量级表单验证的插件,有丰富的表单验证规则,还有灵活的自定义验证规则,支持input,select,textarea的验证。
一、使用步骤
1.导入js文件
jquery-3.1.1.js jQuery的js文件,一定要在所有js文件上边,文件下载地址:http://files.cnblogs.com/files/nidongde/jquery-3.1.1.zip
jquery.validate.js validate的js文件。文件下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
2.表单定义元素时提供name属性,js代码验证表单时,validate要根据name属性来验证该元素。form提供id属性。
<form action="" method="post" id="formId">
<div>用户名</div>
<div><input type="text" name="username"/></div>
<div><input type="submit" value="提交"/></div>
</form>
3.写js代码验证表单
<script type="text/javascript">
$(document).ready(function(){
$("#formId").validate({
rules:{
username:{required:true}
},
messages:{
username:{required:"用户名不能为空!"}
}
});
});
</script>
$("#formId").validate({});是告诉validate要验证的表单。
rules:{}是validate的验证规则,在里边根据每个元素的name属性,不同的需求,添加相应的验证规则。required就是validate默认的一个验证规则,作用是限制元素的值不能为空。
messages:{}是错误提示信息,根据rules中的name属性和验证规则,定义不同的提示信息。如果不定义messages,默认会根据每个元素使用的验证规则来调用validate的提示信息,是英文的。
以上操作就可以在用户对表单没有任何输入操作的时候限制这个表单提交,并且提示错误信息。
二、Validate默认校验规则
(1)required:true 必输字段
(2)remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(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:true 必须输入合法的信用卡号
(10)equalTo:"#password" 输入值必须和#password相同
(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