jquery.validate 表单验证
程序员文章站
2022-03-02 23:42:44
...
项目使用 jquery.validate.js 对表单进行了验证,jquery.validate 还是很强大的,下面说一些常用的验证
1.项目先要导入js库
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
JS 版本:
jQuery JavaScript Library v1.9.0
jQuery Validation Plugin 1.11.1
2.可以做哪些校验
(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:true 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (12)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (14)range:[5,10] 输入值必须介于 5 和 10 之间 (15)max:5 输入值不能大于5 (16)min:10 输入值不能小于10
3.用法
用法分两种,
第一, 直接在标签元素上验证
第二, jquery提交表单在提交时进行验证
先看一下,第一种,直接在标签元素上验证
1) 验证规则是布尔类型的
(1)required:true 必输字段 (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 必须输入合法的信用卡号 下面是举例: 非空验证:<input type="text" id="contractName" name="contractName" class="required" /> Email验证:<input type="text" id="contractName" name="contractName" class="email" /> ...... ...... 等等,布尔类型都可以class="验证规则" ,多个可以用空格分割 如: class="required email"
2) 验证规则带参数的
带1个参数 (10)equalTo:"#field" 输入值必须和#field相同 (11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (12)minlength:10 输入长度最小是10的字符串(汉字算一个字符) (15)max:5 输入值不能大于5 (16)min:10 输入值不能小于10 带2个参数 (13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (14)range:[5,10] 输入值必须介于 5 和 10 之间 带参数的就直接当做元素属性写在元素中, 举例: 必填并且验证和ID为contractNo的元素值相同:<input type="text" id="contractName" name="contractName" class="required" equalTo="#contractNo" /> 最小长度 :<input type="text" id="contractName" name="contractName" minlength="5" /> maxlength max,min都是一样的使用 长度介于1和10之间: <input type="text" id="contractName" name="contractName" rangelength="1,10"/> range用法同上
第二种,使用jquery提交表单在提交时进行验证的
用法: rules:{ 要验证的html元素ID:{ //验证规则 } }
验证用户名是否存在,
$("#form").validate({ submitHandler:function(form){ //提交表单 }, errorPlacement: function(label, element) { label.insertAfter(element); }, rules:{ serialId:{ required:true }, userName: { required:true, remote:{ //验证用户名是否存在 type:"POST", url:"${pageContext.request.contextPath}/systemuser/checkUserExist.do", data:{ propName:'userName', propVal:function(){ return $("#userName").val(); } } } }, userPassword:{ required:true }, userRole:{ required:true } }, messages: { userName: { remote:"该用户名已经存在!" } }, invalidHandler: function(form, validator) { return false; } }); //验证范围,介于5到9之间 range:"5,9" //长度最大值 maxlength:10 . . . . 等等..都可以尝试一下.
下面也是介绍jquery validate 的文章,大家也可以看看
jQuery验证控件jquery.validate.js使用说明+中文API http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html
W3cSchool http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
Jquery 验证详解一 http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html
上一篇: 张小庆,在路上(2)
下一篇: 张小庆,在路上(4)-从哪里开始呢