项目使用 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