虽然现在MVC比较热， 但是使用Web Form方式进行开发的项目应该还有很多，这就少不了使用验证控件，但是验证控件在验证不通过时，提醒的方式很简单，不够友好。如果页面布局是流布局方式，很容易因为显示出来的错误信息造成布局混乱。AjaxControlToolkit的ValidatorCallout虽然可以很好，但是需要为每一个验证控件要再加多一个控件， 在实际使用中太麻烦了，于是分析了ValidatorCallout的原理后，自己来实现一个更好用的ValidatorCallout
原理： 每一个验证控件最后都会在页面中生成相应的元素，并有一个
evaluationfunction属性，这个方法会在验证的时候被调用， AjaxControlToolkit中就是通过重写这个方法来达到提示的目的。
//
// Override the evaluation method of the current validator
//
if(elt.evaluationfunction) {
this._originalValidationMethod = Function.createDelegate(elt, elt.evaluationfunction);
this._validationMethodOverride = Function.createDelegate(this, this._onvalidate);
elt.evaluationfunction = this._validationMethodOverride;
}
新的
ValidatorCallout实现方式与这个类似，由于所有的验证控件都在
Page_Validators这个数组中，这个是由验证控件自动生成的，所以应该不用再给每一个验证控件都再加一个控件，只引用相应的脚本就可以了，不用添加修改任何代码。
实现方式：
var ValidatorCallout = function(validator) {
if (typeof (validator) =='string')
this._validator = document.getElementById(validator);
else
this._validator = validator;this._validator.display = 'None'; //the error message will not show when validate
if (typeof (validator.controltovalidate) == 'string') {
this._validatorControl = document.getElementById(validator.controltovalidate);
}
else {
this._validatorControl = null;
}
}
ValidatorCallout.zIndex
= 999;ValidatorCallout.prototype
= {initiate:
function() {$(
'<span></span>').addClass('tip-message')$(
'<div></div>').addClass('tip_close').appendTo(divPanel)$(
'body').append(divContainer);this._validator.callout = this;//over write the validator.evaluationfunction to new funtion$(
this._validatorControl).unbind('focus', ShowErrorMessageWhenFocus)};
ValidatorCallout.show
= function(validator) {ValidatorCallout.hide
= function(validator) {jQuery(
function($) {});
要点：
jQuery(function($) {
if (typeof (Page_Validators) != 'undefined') {
for (var i = 0; i < Page_Validators.length; i++) {
var validatorCall = new ValidatorCallout(Page_Validators[i]);
validatorCall.initiate();
}
}
});
在页面加载的时候，将 Page_Validators中的验证控件取出来创建validatorCallout，然后调用
initiate方法创建提示控件，将它的evaluationfunction修改成新的包装后的方法，实现方式：
var evaluationfunction = this._validator.evaluationfunction;
this._validator.evaluationfunction = function(val) {
if (!evaluationfunction(val)) {
ValidatorCallout.show(val);
return false;
}
else {
ValidatorCallout.hide(val);
return true;
}
};
关键方法：
initiate： 初始化控件，并创建相应的提示信息元素
show: 显示错误提示信息
hide: 隐藏错误信息
使用方法：在页面中加入JS脚本和CSS文件就可以了。（另外需要引用jQuery脚本文件）
效果大家试一下就知道了。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。