jquery-validation验证功能强大，在这里就不多说了。只是他的提示没有那么漂亮，有没有办法改变他的提示方式呢？官方好像也有修改的方法，懒得看了，文档都是英文的 ^_^!英文不好呀。其实还是想本地化一下，原版的是英文的提示，顺便把提示也改成中文的，再加上一些常用的验证方法，以后就不再需要addMethod了，丰富一下验证方法。不多说了直接修改吧。我们要修改成哪样子呢？来几张图片吧。
这是原来的提示方式。
修改后的提示方式
原版只有三种状态，没验证之前，验证错误，验证成功。
修改后的状态，未验证之前，获得焦点，验证错误，验证成功，并且状态会保持着。
先用Notepad++打开原版js，为什么用Notepad++打开？Notepad++可以折叠方法块，方便查找。
要实现这样的功能，必须有四个class，原版的已经有error和valid，我们再加上两个normal和focus分别为未验证之前和获取焦点的class。
这里我们在199行加上如下的代码
errorClass: "error", validClass: "valid", normalClass: "normal", focusClass: "focus", signClass: "tip",//有这个class表示是提示标签
页面上我们只需要这样写(当然要写在form中)
接下来我们依次修改 获得焦点的事件onfocusin，失去焦点事件onfocusout，按键起来的事件onkeyup，看名字可以看得出来的。代码就在刚刚修改的那里下来一点。
修改后的
onfocusin: function (element, event) {
this.lastActive = element;
//先把样式整理好该remove哪个该加哪个
this.addWrapper(this.errorsFor(element))
.removeClass(this.settings.errorClass)
.removeClass(this.settings.validClass)
.removeClass(this.settings.normalClass)
.addClass(this.settings.focusClass);
this.addWrapper(this.errorsFor(element)).html(this.errorsFor(element).attr("tip"));
// hide error label and remove error class on focus if enabled
if (this.settings.focusCleanup && !this.blockFocusCleanup) {
if (this.settings.unhighlight) {
this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass);
}
//this.addWrapper(this.errorsFor(element)).hide();
this.addWrapper(this.errorsFor(element)).removeClass(this.settings.errorClass)
.removeClass(this.settings.validClass).addClass(this.settings.normalClass);
}
},
onfocusout: function (element, event) {
this.addWrapper(this.errorsFor(element))
.removeClass(this.settings.errorClass)
.removeClass(this.settings.focusClass)
.removeClass(this.settings.validClass)
.addClass(this.settings.normalClass);
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
},
//不用修改
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === '') {
return;
} else if (element.name in this.submitted || element === this.lastActive) {
this.element(element);
}
},
修改这些之后，还不起作用呢。接下来再修改showLabel方法
showLabel: function (element, message) {//显示错误
var label = this.errorsFor(element);
if (label.length) {
// refresh error/success class
label.removeClass(this.settings.validClass)
.removeClass(this.settings.focusClass)
.removeClass(this.settings.normalClass)
.addClass(this.settings.errorClass);
label.html(message);
//不需要判断有没有generated属性，
//因为class=tip已经表示是提示标签了
// check if we have a generated label, replace the message then
//if (label.attr("generated")) {
// label.html(message);
//}
} else {
// create label
label = $("<" + this.settings.errorElement + "/>")
.attr({ "for": this.idOrName(element)})
//.attr({ "for": this.idOrName(element), generated: true })
.addClass(this.settings.signClass)//加上标记是提示标签的class
.addClass(this.settings.errorClass)
.html(message || "");
if (this.settings.wrapper) {
// make sure the element is visible, even in IE
// actually showing the wrapped element is handled elsewhere
label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
}
if (!this.labelContainer.append(label).length) {
if (this.settings.errorPlacement) {
this.settings.errorPlacement(label, $(element));
} else {
label.insertAfter(element);
}
}
}
if (!message && this.settings.success) {
label.text("");
if (typeof this.settings.success === "string") {
label.addClass(this.settings.success);
} else {
this.settings.success(label, element);
}
}
this.toShow = this.toShow.add(label);
},
再修改hideErrors方法
hideErrors: function () {
this.addWrapper(this.toHide).removeClass(this.settings.errorClass)
.removeClass(this.settings.normalClass)
.removeClass(this.settings.focusClass)
.addClass(this.settings.validClass).html("输入正确");
//this.addWrapper(this.toHide).hide();
},
还漏了个方法，找到错误提示的标签，不再需要根据calss=error来查找标签。
只需要查找有标记标签的label就可以了。
errors: function () {
//var errorClass = this.settings.errorClass.replace(' ', '.');
//return $(this.settings.errorElement + "." + errorClass, this.errorContext);
return $(this.settings.errorElement + "."+this.settings.signClass, this.errorContext);
},
接下来我们还要做一件事情，就是在初始化的时候显示tip信息，label的tip="请输入用户名"属性派上用场了
，既然是初始化，我们找一下 init方法吧。在300行左右的地方找到Init方法，加上以下代码。
this.reset();
//初始化的时候显示提示信息
$.each(this.errors(),function(){
$(this).html($(this).attr("tip"));
});
很简单的代码。
到此提示部分修改完了，修改一下样式吧
label.error, label.valid, label.focus,label.normal {
background: url(/content/images/ico_warn.png) no-repeat 4px -197px;
font: 12px/1 verdana, simsun, sans-serif;
margin: 0;
padding: 4px 0px 4px 23px;
}
label.normal { background-position: 4px -197px; color: #999999;}
label.error { background-position: 4px -253px;color: #B52726; }
label.valid { background-position: 4px 3px;color: #2666AF; }
label.focus { background-position: 4px -365px; color: #999999; }
接下来你可以修改提示信息
messages: {
required: "必填项",
remote: "Please fix this field.",
email: "邮箱非法,请确认",
url: "URL地址格式错误，请确认",
date: "日期格式错误，请确认",
dateISO: "日期格式(ISO)错误，请确认.",
number: "请输入数字",
digits: "请输入整数",
creditcard: "信用卡号码格式错误",
equalTo: "两次输入不一致",
accept: "后缀名错误",
mobile:"手机号码格式错误",
tel:"电话号码格式错误",
mobileOrTel:"手机或电话号码格式错误",
qq:"QQ号码格式错误",
chinese:"请输入中文",
idcard:"身份证号码格式错误",
letter:"请输入字母",
ip:"IP地址格式错误",
zipcode:"邮政编码格式错误",
maxlength: $.validator.format("最多输入 {0} 个字符"),
minlength: $.validator.format("最少输入 {0} 个字符"),
rangelength: $.validator.format("字符长度介于 {0} 到 {1} 之间"),
range: $.validator.format("值大小介于 {0} 到 {1}之间"),
max: $.validator.format("最大值不超过 {0}"),
min: $.validator.format("最小值不小于 {0}")
},
增加一些方法
methods: {.....}中修改或增加吧
还有就是修改remote的验证方法，据说是有错误的。不知道这个版本有没有改过来
还有一个就是
classRuleSettings: {
required: { required: true },
email: { email: true },
url: { url: true },
date: { date: true },
dateISO: { dateISO: true },
number: { number: true },
digits: { digits: true },
creditcard: { creditcard: true }
},
class验证。
意思就是
加上class="required"自动验证靠的就是这个了