Validate 验证框架详解

默认情况下，验证提示信息用label元素来显示,并且会添加cssclass,通过css可以很方便设置出错控件以及错误信息的显示方式。

/*输入控件验证出错*/

forminput.error{border:solid1pxred;}

/*验证错误提示信息*/

formlabel.error{width:200px;margin-left:10px;color:Red;}

如果想自定义显示方式，可以修改jquery.validate的默认显示方式

默认用label显示错误消息，可以通过errorElement属性来修改

errorElement:错误消息的html标签

$(".selector").validate

errorElement:"em"

})

可以在出错信息外用其他的元素包装一层。

wrapper:错误消息的外层封装html标签

$(".selector").validate({

wrapper:"li"

})

验证出错的cssclass默认是error，通过errorClass可以修改

errorClass:验证出错时使用的cssclass

$(".selector").validate({

errorClass:"invalid"

})

还自定义验证成功时的动作

success:如果值是字符串，会当做一个css类，如果是一个函数，则执行该函数

$(".selector").validate({

success:"valid"

})

或者

success:function(label){

label.html("").addClass("checked");

}

还可以把错误消息统一到一个容器显示

errorLabelContainer:将错误消息统一到一个容器显示

$("#myform").validate({

errorLabelContainer:"#messageBox"

})

默认情况下，错误消息是放在验证元素后面的，可以自定义错误消息的显示位置

$(".selector").validate({

errorPlacement:function(error,element){

error.appendTo(element.parent("td").next("td"));

}

})

更进一步可以定义一个组，把几个地方的出错信息统一放在一个地方，用errorPlacement控制把出错信息放在哪里

groups：定义一个组

$(".selector").validate({

groups:{

username:"fnamelname"

},

errorPlacement:function(error,element){

if(element.attr("name")=="fname"||element.attr("name")=="lname")

error.insertAfter("#lastname");

else

error.insertAfter(element);

}

})

高亮显示

highlight:高亮显示，默认是添加errorClass

unhighlight:和highlight对应，反高亮显示

$(".selector").validate({

highlight:function(element,errorClass){

$(element).addClass(errorClass);

$(element.form).find("label[for="+element.id+"]").addClass(errorClass);

},

unhighlight:function(element,errorClass){

$(element).removeClass(errorClass);

$(element.form).find("label[for="+element.id+"]").removeClass(errorClass);

}

});

或者可以完全自定义错误显示

showErrors:得到错误的显示句柄

$(".selector").validate({

showErrors:function(errorMap,errorList){

$("#summary").html("Yourformcontains"+this.numberOfInvalids()

+"errors,seedetailsbelow.");

this.defaultShowErrors();

}

})[/u][/u]