jQuery Validation详解

最新推荐文章于 2024-03-14 07:00:00 发布

hello_ljfbest

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量1.9k

点赞数

分类专栏： div/css 文章标签： jquery

本文链接：https://blog.csdn.net/ljfbest/article/details/12057967

版权

div/css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

看了好多网上的资料还有api终于知道个大概了

需要引入的文件

使用方法

a>把验证的规则写在标签内，如姓名:<input id="name" name="name" minlength="2" type="text" required /> 即要求name必填且最少长度是2, 最后调用$("form").validate();就会验证表单

b>把验证的规则写在validate()方法中

$("#myForm").validate({
   rules:{
	username:{
		required : true,
		minlength : 2
	} 
   } 
})

在使用中可以两者结合,验证规则有如下:

required:true 必填

minlength:最小长度 maxlength:最大长度

rangelength: [3,10] 长度介于 3 和 1 之间的字符串

range:[100,1000] 只能是100和 1000 之间的值"

min:最小值 max:最大值

email:true 验证邮箱

url:true 验证是否是合法的网址

date:true 验证是否是合法的日期 new Date() 类型格式

dateISO:true 验证是否是合法的日期年/月/日或年-月-日格式

number:true 验证是否是合法的数字

digits:true 验证是否为整数

creditcard: 验证合法的信用卡号

equalTo:'#pass' 与哪个表单字段的值相等，常用于验证重复输入密码

accept: "gif|png|jpg" 验证是否是合法后缀名，常用于验证文件的扩展名

remote:'url' 远程验证，返回值只能是true或false。在访问指定的url时，会自动把当前字段的值做为参数传递过去。

remote:{ 
      url: "UserServlet", 
      type: "post", //传值方式
      data:{ //要传过的值  返回true时表示通过验证，false反
      username: function() { return $("#username").val();}
      } 
}

插件中还提供了增加规则的方法,可以来增加一些我们自己的规则,方法

jQuery.validator.addMethod("规则名称", function(value, element, params) {

return this.optional(element) || 验证value

}

如下这个自定义的验证规则

jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码!");

验证信息的国际化，默认验证提示是英文的，导入validation已写好的国际化文件就可实现国际化，如：<script src="js/messages_zh.js" type="text/javascript"></script>

改变错误/正确消息显示样式

指定label.error的样式就可以了，如下：

<style type="text/css">
       label.error{color:#ea5200; margin-left:4px; padding:0px 20px;background:url(images/unchecked.gif) no-repeat 2px 0 }
       label.right{margin-left:4px; padding-left:20px; background:url(images/checked.gif) no-repeat 2px 0}
</style>

让错误提示信息显示到指定的位置

解决办法是在validate({})追加以下代码：

errorPlacement: function(error, element) { 
    if ( element.is(":radio") ) 
        error.appendTo ( element.parent() ); 
    else if ( element.is(":checkbox") ) 
        error.appendTo ( element.parent() ); 
    else if ( element.is("input[name=captcha]") ) 
        error.appendTo ( element.parent() ); 
    else 
        error.insertAfter(element); 
}

修改提示信息的内容，在message中写即可，如下：

messages:{ //自定义错误信息内容,如果某项没写则使用默认的信息提示
     username:{
	required:"请填写用户名",
	minlength:"最小长度是2",
	remote:"该用户名已存在！"
     }
}

重置表单。Form表单原始的重置方法是reset自带

<input type="reset" value="重 置" />

点击“重置”按钮，表单元素将会重置，但是验证的提示信息并没重置，Validation提供了重置表单的方法：resetForm()

$("input:reset").click(function(){ 
    validate.resetForm(); 
});

下面是一个代码样例：

<!-- 需要引入的文件 -->
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/messages_zh.js" type="text/javascript"></script>

<script type="text/javascript">
	$().ready(function() {

		 //自定义 邮政编码验证    
		jQuery.validator.addMethod("isZipCode", function(value, element) {    
		  var zip = /^[0-9]{6}$/;    
		  return this.optional(element) || (zip.test(value));    
		}, "请正确填写您的邮政编码!");        
		//自定义 身份证号码验证
		jQuery.validator.addMethod("isIdCardNo", function(value, element) { 
		  var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;   
		  return this.optional(element) || (idCard.test(value));    
		}, "请输入正确的身份证号码!"); 

		var validate=$("#myForm").validate({
			rules:{
				username:{
					required : true,
					minlength : 2,
					remote:{ 
						url: "UserServlet", 
		                type: "post", //传值方式
		                data:{ //要传过的值  返回true时表示通过验证，false反
		                	username: function() { return $("#username").val();}
		                } 
		            } 
				},
				password:{
					required : true,
					minlength : 5
				},
				rpassword:{
					equalTo : "password"
				},
				email:{
					required : true,
					email : true
				},
				url:"url", //只有一个验证规则时可以用引号
				sex:"required",
				code:"isZipCode",
				idCard:{
					required:true,
					isIdCardNo:true
				}
			},

			messages:{ //自定义错误信息内容,如果某项没写则使用默认的信息提示
				username:{
					required:"请填写用户名",
					minlength:"最小长度是2",
					remote:"该用户名已存在！"
				},
			},

			errorPlacement: function(error, element) {//处理错误信息位置，在下面的复选框用到
				if ( element.is(":radio") )
					error.appendTo ( element.parent() );
				else if ( element.is(":checkbox") )
					error.appendTo ( element.parent() );
				else if ( element.is("input[name=captcha]") )
					error.appendTo ( element.parent() );
				else
					error.insertAfter(element);
			},
		    success: function(label) {  //与上面errorPlacement对应
				   label.html(" ").addClass("right");
		    }	
		});
 		$("input:reset").click(function(){ //重置,包括错误提示
 			validate.resetForm(); //注意此处validate是上面定义过的，由validate()函数返回的值
 		});
});
</script>

<!--处理错误信息样式 label.error  label.right  -->
<style type="text/css">
	#myForm label.error{color:red; margin-left:4px; padding:0px 20px; background:url(js/unchecked.gif) no-repeat 2px 0 }
	#myForm label.right{margin-left:4px; padding-left:20px; background:url(js/checked.gif) no-repeat 2px 0}
</style>
</head>
<body>

	<form id="myForm" method="get" action="">
		<table>
			<tr>
				<td>用户名*：</td>
				<td><input name="username" type="text" id="username"/></td>
			</tr>
			<tr>
				<td>密码*：</td>
				<td><input name="password" type="password" /></td>
			</tr>
			<tr>
				<td>重复密码*：</td>
				<td><input name="rpassword" type="password" /></td>
			</tr>
			<tr>
				<td>邮箱*:</td>
				<td><input type="text" name="email" /></td>
			</tr>
			<tr>
				<td>网址：</td>
				<td><input type="text" name="url" /></td>
			</tr>
			<tr>
				<td>规章：</td><!-- 此处需错误信息位置需要处理,使错误提示出现在“协议”两字后 -->
				<td><input type="checkbox" name="chk"  class="required"/>接受此协议</td>
			</tr>
			<tr>
				<td>性别：</td>
				<td><input type="radio" name="sex" />男 <input type="radio" name="sex"/>女</td>
			</tr>
			<tr>
				<td>邮政：</td><!-- 自定义的验证规则 -->
				<td><input type="text" name="code" required/></td>
			</tr>
			<tr>
				<td>身份证：</td><!-- 自定义的验证规则 -->
				<td><input type="text" name="idCard"/></td>
			</tr>
			<tr>
				<td><input type="submit" value="提交" /></td>
				<td><input type="reset" value="重置" /></td>
			</tr>
		</table>
	</form>

</body>

运行结果如下：

注意：

今天在工作室，一同学说如果html标签name属性中有'.'就不能用了，因为他在使用struts2获取传过来的值时遇到过，jquery的validate表单验证框架是按照name来验证的，后来我在网上搜了下，有人说在js中把name（比如说"user.name"）用' '或" "包住就行了，试了下果断行，嘎……