首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些.
而Microsoft通过jquery.validate.unobtrusive.js然后做了封装,让它高度的集成到了MVC中.
这次,我们通过对jquery.validate.unobtrusive.js做一点小小的修改,让这个验证效果看起来更漂亮一点.
同时也让大家对jquery.validate.unobtrusive.js了解的更多一点,希望能够给大家起到举一反三的效果.
我们先来看看修改后的效果:
1.初始状态
2.验证失败
3.验证成功
1.首先对CSS做一点点小修改(注意红色字部分),
代码如下:
.field-validation-error {
color: #f00;
background: url(onError.gif) left center no-repeat;
padding-left: 20px;
}
.field-validation-success {
display: inline;
padding-left: 20px;
background: url(onCorrect.gif) left center no-repeat;
}
2.修改jquery.validate.unobtrusive.js
在onError方法中:
把
container.removeClass("field-validation-valid").addClass("field-validation-error");
改成
container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");
function onError(error, inputElement) { // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null; container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container); if (replace) {
container.empty();
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}
}
在onSuccess方法中:
把
container.addClass("field-validation-valid").removeClass("field-validation-error");
改成
container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");
function onSuccess(error) { // 'this' is the form element
var container = error.data("unobtrusiveContainer"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null; if (container) {
container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");
error.removeData("unobtrusiveContainer"); if (replace) {
container.empty();
}
}
}
代码+注释版:
//每次执行完验证的时候,都会来这里(不论成功或失败)
//在这里可以控制验证提示消息的显示或隐藏
//error:包含验证提示消息的标签,是一个Jquery对象
//如果验证通过的话是这样子:<span for="UserCode" generated="true"></span>
//如果验证通过的话是这样子:<span for="UserCode" generated="true">UserCode 字段是必需的。</span>
//inputElement:当前被验证的input控件
function onError(error, inputElement) { // 'this' is the form element
//首先查到显示验证提示信息的容器,
//一般是这样子:<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>
//replace:这个值用来判断容器内的值是否需要被替换
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null; //显示容器
container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error"); //把容器跟本次的验证提示信息关联起来(success中会用到)
error.data("unobtrusiveContainer", container); if (replace) {
//清空容器内容,
container.empty();
//然后把本次的提示信息添加到容器中,并清除提示信息的class
//注意:如果验证通过的话,还会调用success方法,在success方法中会清空container
error.removeClass("input-validation-error").appendTo(container);
}
else {
//不清空容器,只是隐藏容器中的验证提示信息
error.hide();
}
}
//验证通过后,来这里
//error:验证通过后的提示信息,其实就是<span for="UserCode" generated="true"></span>,跟onError中上的error是同一个东西
function onSuccess(error) { // 'this' is the form element //获取容器(在onError中已经放进error.data中了)
var container = error.data("unobtrusiveContainer"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null; if (container) {
//隐藏容器
container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid"); //移除容器跟提示信息的关联
error.removeData("unobtrusiveContainer"); if (replace) {
//清除容器
container.empty();
}
}
}
代码请自行下载,原文引用路径:http://www.cnblogs.com/builderman/p/3318252.html,代码是我自己写的,博文是复制的。。
代码地址:http://files.cnblogs.com/baiyunchen/%E4%BF%AE%E6%94%B9mvc%E9%AA%8C%E8%AF%81.zip