本文实例介绍了jQuery插件Validate实现自定义校验结果样式的详细代码，分享给大家供大家参考，具体内容如下
效果如下：
具体步骤：
1、引入依赖包
2、添加错误样式
3、自定义提示信息
4、调用错误样式，或是成功样式
5、详细的代码
<style type="text/css">
- { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate({
rules: {
username: {
required: true,minlength: 2
},email: {
required: true,email: true
},url:"url",comment: "required"
},messages: {
username: {
required: '请输入姓名',errorElement: "em",//可以用其他标签，记住把样式也对应修改
success: function(label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
<form class="cmxform" id="commentForm" method="get" action="">