首页 > 程序开发 > web前端 > JavaScript >

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

2012-11-05

jquery-validation验证功能强大,在这里就不多说了。只是他的提示没有那么漂亮,有没有办法改变他的提示方式呢?官方好像也有修改的方法,懒得看了,文档都是英文的 ^_^!英文不好呀。其实还是想本地化一下,原版...

jquery-validation验证功能强大,在这里就不多说了。只是他的提示没有那么漂亮,有没有办法改变他的提示方式呢?官方好像也有修改的方法,懒得看了,文档都是英文的 ^_^!英文不好呀。其实还是想本地化一下,原版的是英文的提示,顺便把提示也改成中文的,再加上一些常用的验证方法,以后就不再需要addMethod了,丰富一下验证方法。不多说了直接修改吧。我们要修改成哪样子呢?来几张图片吧。

这是原来的提示方式。

修改后的提示方式

原版只有三种状态,没验证之前,验证错误,验证成功。

修改后的状态,未验证之前,获得焦点,验证错误,验证成功,并且状态会保持着。

先用Notepad++打开原版js,为什么用Notepad++打开?Notepad++可以折叠方法块,方便查找。

要实现这样的功能,必须有四个class,原版的已经有error和valid,我们再加上两个normal和focus分别为未验证之前和获取焦点的class。

这里我们在199行加上如下的代码

[javascript]
errorClass: "error",
validClass: "valid",
normalClass: "normal",
focusClass: "focus",
signClass: "tip",//有这个class表示是提示标签
页面上我们只需要这样写(当然要写在form中)
[html]
<input id="UserName" name="UserName" class="required" type="text" value="" />
<label for="UserName" class="tip normal" tip="请输入用户名"></label>
接下来我们依次修改 获得焦点的事件onfocusin,失去焦点事件onfocusout,按键起来的事件onkeyup,看名字可以看得出来的。代码就在刚刚修改的那里下来一点。

修改后的

[javascript]
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) === &#39;&#39;) {
return;
} else if (element.name in this.submitted || element === this.lastActive) {
this.element(element);
}
},
修改这些之后,还不起作用呢。接下来再修改showLabel方法

[javascript]
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方法
[javascript]
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就可以了。
[css]
errors: function () {
//var errorClass = this.settings.errorClass.replace(&#39; &#39;, &#39;.&#39;);
//return $(this.settings.errorElement + "." + errorClass, this.errorContext);
return $(this.settings.errorElement + "."+this.settings.signClass, this.errorContext);
},

接下来我们还要做一件事情,就是在初始化的时候显示tip信息,label的tip="请输入用户名"属性派上用场了
,既然是初始化,我们找一下init方法吧。在300行左右的地方找到Init方法,加上以下代码。
[javascript]
this.reset();
//初始化的时候显示提示信息
$.each(this.errors(),function(){
$(this).html($(this).attr("tip"));
});
很简单的代码。
到此提示部分修改完了,修改一下样式吧

[css]
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; }

接下来你可以修改提示信息
[html]
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}")
},
增加一些方法
[javascript]
methods: {.....}中修改或增加吧

还有就是修改remote的验证方法,据说是有错误的。不知道这个版本有没有改过来
还有一个就是

[javascript]
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验证。
意思就是

[html]
<input id="UserName" name="UserName" class="required" type="text" value="" />
加上class="required"自动验证靠的就是这个了

相关文章
最新文章
热点推荐