高版本jQuery Validation Plugin验证图片样式不改变问题

原创文章，做备忘交流使用。欢迎转载，转载请注明出处：

http://blog.csdn.net/jilijelon/article/details/18569287

页面HTML文件：demo4.html

	

    	

    		
demo4
    	
    	

    		
姓
    		

    		
    		
    	
    	
    	

    		

                
    	
    

页面验证JS文件：register.js

//页面加载时调用
	$().ready(function() {
		$("#regform").validate({
			rules : {
				surname : {
					required : true
				},
				email : {
					required : true,
					email : true
				}
			},
			messages : {
				surname : {
					required: "请输入姓名"	
				},
				email : {
					required : "请输入Email地址",
					email : "请输入正确的email地址"
				}
			},
			errorPlacement : function(error, element) {
				error.appendTo(element.parent());
			},
			 
			errorClass : "error",
			errorElement : "span",
			success: function(label) {
               label.html("填写正确！").addClass("checked");
           }
		});
	});

页面样式CSS文件:css.css

input.error { border: 1px solid red; }
span.error {
  background:url("../images/error.png") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
span.checked {
  background:url("../images/success.png") no-repeat 0px 0px;
}

使用jQuery Validation Plugin 1.11.1的时候 自定义错误消息样式

1.不输入任何字符点击submit按钮(验证规则错误):

2.输入任意字符点击submit按钮(满足验证规则):

3.删除刚才输入的字符(导致不满足验证规则)

这里开始出现问题了 按照常规应该是 可是却变成了  

使用jQuery validation plug-in 1.7的时候 自定义错误消息样式

1.不输入任何字符点击submit按钮(验证规则错误):

2.输入任意字符点击submit按钮(满足验证规则):

3.删除刚才输入的字符(导致不满足验证规则)

问题分析：

分析工具台可以发现 在使用1.11.1版本的jquery.validate.js的时候 验证完毕后再次导致验证不满足的时候

请输入姓名 中checked类没有被移除掉。

原因出自于：新版的683行：

label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );

和之前版本的626行的差别。

label.removeClass().addClass( this.settings.errorClass );

以前的版本会把所有的class移除，再添加一个class，
新版的会把validClass移除，再添加一个。

解决方法：

在验证js validate方法里面加上

$("#regform").validate({

validClass: "checked" //这边的checked是你自己设置的alidClass，默认valid

});

参考帖子： http://bbs.csdn.net/topics/390681539

源码下载：http://pan.baidu.com/s/1bnte1iB