jquery.validate.js表单验证

jquery.validate.js是一款表单验证插件。

下面从一个修改密码的表单来解说这款插件：

$(document).ready(function(){
	jQuery.validator.addMethod("passcheck", function(value, element) {
	    return this.optional(element) || (/^(?![0-9]+$)(?![A-Z]+$)(?![a-z]+$)(?![\`\~\!\@\#\$\%\^\&\*\_\-\+\=\,\.\?\/\|\\]+$)(?![0-9\`\~\!\@\#\$\%\^\&\*\_\-\+\=\,\.\?\/\|\\]+$)[a-zA-Z0-9\`\~\!\@\#\$\%\^\&\*\_\-\+\=\,\.\?\/\|\\]{8,20}$/.test(value));
	}, "格式不正确。");
	jQuery.validator.addMethod("different", function(value, element) {
	    return this.optional(element) || value != $('#oldpass').val();
	}, "格式不正确。");
	
    $('#passform').validate({        
        rules :{				//rules验证规则
        	   oldpass:{
        		required: true		//oldpass不能为空
            },
            password:{			
            	required :true,		//password不能为空
                	passcheck :true,		//password输入规则，正则验证
                	different :true		//password不能与旧密码相同
            },
            password2:{
            	required :true,		//password2不能为空
            	equalTo:'#password'	//password2必须与password相同
            }
        },
        messages :{
        	oldpass:{
        		required : '字段不为空'
            },
            password:{
            	required :'字段不为空 ',
            	passcheck :'密码不符合规则',
            	different :'新密码与旧密码不能相同'
            },
            password2:{
            	required :'字段不为空',
            	equalTo:'两次输入的密码不一致'
            }
        },
        errorPlacement  :function(error, element){	//错误信息显示位置 element后面
            element.next().html('<font color="red">'+error.html()+'</font>');
        },
        highlight       :function(element, errorClass, validClass){	//未通过的元素加样式 未通过的情况
         },
        unhighlight     :function(element, errorClass, validClass){  	//通过的元素加样式 通过的情况
        	$(element).next().html(' ');           
        },
        onkeyup: false,						//
        submitHandler: function (form) {				//
            form.submit();
		}
        });
    $('form input').blur(function(){
        if($(this).valid){$(this).valid();}
    });
});

 

jquery.validate.js 方法

jQuery.validator.addMethod("different", function(value, element) {
	    return this.optional(element) || value != $('#oldpass').val();
	}, "格式不正确。");

jQuery.validator.addMethod("different", function(value, element){

                               return this.optional(element) || value != $('#oldpass').val();

}, "格式不正确");

 

this.optional(element),表单控件的值不为空时才触发。