修改jquery-validation让你的验证提示更漂亮

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中)

<input id="UserName" name="UserName" class="required" type="text" value="" />
<label for="UserName" class="tip normal" tip="请输入用户名"></label>

接下来我们依次修改 获得焦点的事件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验证。

意思就是

<input id="UserName" name="UserName" class="required" type="text" value="" />

加上class="required"自动验证靠的就是这个了