jquery.validate 表单验证

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