已经习惯了用Validator控件来验证我们在表单的输入#xff0c;并通过ValidationSummary来输出我们为Validator控件设置的Error

message。

不知道大家有没想过进一步改进一下我们的Validation来改…一

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。

我们

已经习惯了用Validator控件来验证我们在表单的输入并通过ValidationSummary来输出我们为Validator控件设置的Error

message。

不知道大家有没想过进一步改进一下我们的Validation来改善我们的User

Experience。

比如在ValidationSummary输出一个Link连接到对应的控件而不是显示单纯的Error

比如在上图中是一个典型的Login的Page。

我们有两个必填的字段User

name和Password。

为此我定义两个RequiredFieldValidator。

他们的Error

message分别为”User

Message被显示在ValidationSummary上面。

不过和传统的Error

message不同显示在ValidationSummary上的实际上是两个链接Click对应的Error

message光标会设置到对应的Textbox上。

比如上图所示Click

”User

现在我们来简单叙述上面的效果是如果实现的在开始之前我想说的是方法非常简单—或许你已经猜到了

Page

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

html

a:hover{}{text-decoration:underline}

style

document.getElementById(control);

script

shot之后再看看上面的Html结构清晰得一目了然。

所以我就不再进一步解释了。

在这里我只需要提提定义在aspx的一段javascript

functionsetFocus。

通过它把focus设置到指定的控件。

script

document.getElementById(control);

script

System.Web.UI.WebControls.WebParts;

using

this.MakeClickableErrorMessage();

private

this.FindControl(validator.ControlToValidate).ClientID;

string

/javascript:setFocus({0});/{1}/a,

clientID,

ctmUserName_ServerValidate(object

source,

Code也简单得一塌糊涂除了MakeClickableErrorMessage这个Method其他的都不值一提。

private

this.FindControl(validator.ControlToValidate).ClientID;

string

/javascript:setFocus({0});/{1}/a,

clientID,

显示在ValidationSummary中原本简单的literal

error

message就是通过上面的这个MakeClickableErrorMessage转变成hyperlink的。

在上面的code中我遍历page中的每个Validator

control有对应ControlToValidate对于一个Validator

control来说ControlToValidate并非一个必需的property如果没有指定该property其值为空字符串直接进入下一个循环。

然后我把原来只是弹出的文本转变成一个a/a然后再将其重新赋值给对应的Validator

比如对于rqfUserName

RequiredFieldValidator来说原来的Error

name

上面只是一个简单的小窍门我们以这个Sample为例来进一步介绍ASP.NET如何尽心Validation的。

为了简单起见在这里我没法讨论所有的Validator

control。

只介绍RequiredFieldValidator和CustomValidator这两种Validator

1Client

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

html

xmlnshttp://www.w3.org/1999/xhtml

head

a:hover{}{text-decoration:underline}

/style

document.getElementById(control);

/script

value/wEPDwUKMTg3OTM1NTM2MA9kFgICAw9kFgYCBQ8PFgIeDEVycm9yTWVzc2FnZQVKPGEgaHJlZj0gImphdmFzY3JpcHQ6c2V0Rm9jdXMoJ3R4dFVzZXJOYW1lJyk7Ij5Vc2VyIG5hbWUgaXMgbWFuZGF0b3J5ITwvYT5kZAIHDw8WAh8ABVI8YSBocmVmPSAiamF2YXNjcmlwdDpzZXRGb2N1cygndHh0VXNlck5hbWUnKTsiPlN1Y2ggYSB1c2VyIGhhcyBub3QgcmVnaXN0ZXJlZCE8L2EZGQCCw8PFgIfAAVJPGEgaHJlZj0gImphdmFzY3JpcHQ6c2V0Rm9jdXMoJ3R4dFBhc3N3b3JkJyk7Ij5QYXNzd29yZCBpcyBtYW5kYXRvcnkhPC9hPmRkZLFuksmAaQN5sw8KrkFk3GqgSn

/div

src/Artech.ClickableValidationSummary/WebResource.axd?d07ZNXubMk-rxUjn0jMywXg2amp;t632969324944906146

script

src/Artech.ClickableValidationSummary/WebResource.axd?d5q3WmDnqxzNvEfUc_QbMe5qdQO1LUQ4P7mwuv6CrIMk1amp;t632969324944906146

script

stylecolor:Red;display:none;/span

span

stylecolor:Red;display:none;/span

/td

stylecolor:Red;display:none;/span

/td

onclickjavascript:WebForm_DoPostBackWithOptions(new

WebForm_PostBackOptions(quot;btnSignInquot;,

quot;quot;,

Array(document.getElementById(vldLogin));

var

Array(document.getElementById(rqfUserName),

document.getElementById(ctmUserName),

document.getElementById(rqfPassword));

/script

document.getElementById(rqfUserName);

txtUserName;

/javascript:setFocus(/txtUserName/);/User

name

RequiredFieldValidatorEvaluateIsValid;

var

document.getElementById(ctmUserName);

txtUserName;

/javascript:setFocus(/txtUserName/);/Such

user

CustomValidatorEvaluateIsValid;

var

document.getElementById(rqfPassword);

txtPassword;

/javascript:setFocus(/txtPassword/);/Password

mandatory!/a;

RequiredFieldValidatorEvaluateIsValid;

/script

value/wEWBQL7uOMiAqXVsrMJArWptJELAsP3i5QHAv23gdwNI0m2v8hOJGGPTPLYqDLAkZE0nKU

/div

/Artech.ClickableValidationSummary/WebResource.axd?d07ZNXubMk-rxUjn0jMywXg2amp;t632969324944906146

type

/Artech.ClickableValidationSummary/WebResource.axd?d5q3WmDnqxzNvEfUc_QbMe5qdQO1LUQ4P7mwuv6CrIMk1amp;t632969324944906146

type

这两个JavaScript由ASP.NET生成。

尤其内容较多在这里先不列出他们的内容等下面真正要使用到其中定义的JavaScript

在列出来。

我们现在姑且称它们为JavaScript1和JavaScript2。

control定义了3个Client端的对象对象的名称和控件名称同名并设置相关的属性controltovalidateerrormessagedisplayevaluationfunction。

其中evaluationfunction为进行Validation的function的名称.

script

document.getElementById(rqfUserName);

txtUserName;

/javascript:setFocus(/txtUserName/);/User

name

RequiredFieldValidatorEvaluateIsValid;

var

document.getElementById(ctmUserName);

txtUserName;

/javascript:setFocus(/txtUserName/);/Such

user

CustomValidatorEvaluateIsValid;

var

document.getElementById(rqfPassword);

txtPassword;

/javascript:setFocus(/txtPassword/);/Password

mandatory!/a;

RequiredFieldValidatorEvaluateIsValid;

script

我们还发现通过Javascript定义了两个Array对象Page_ValidationSummaries和Page_Validators。

这两个Array用于保存Page中的所有的ValidationSummary和Validator

script

Array(document.getElementById(vldLogin));

var

Array(document.getElementById(rqfUserName),

document.getElementById(ctmUserName),

document.getElementById(rqfPassword));

script

javascript:WebForm_DoPostBackWithOptions(new

WebForm_PostBackOptions(quot;btnSignInquot;,

quot;quot;,

通过onclick事件我们可以看到一个命名为WebForm_DoPostBackWithOptions的javascript

function被调用该function接收一个称为WebForm_PostBackOptions类型的对象。

该类型被定一个在JavaScript1中还记得JavaScript1指的是什么吗

function

WebForm_PostBackOptions(eventTarget,

eventArgument,

validation是否进行Validation当前为true。

2.0的新特性当当前为””,因为我没有设置btnSignIn的ValidationGroup的property。

actionUrl表单被提交的Url就像asp中Form的action一样。

ASP.NET

1.x不提供cross-page的提交在2.0中提供了此功能当前为””,

我们再来看看WebForm_DoPostBackWithOptions像WebForm_PostBackOptions一样该function同样被定义在JavaScript1中。

function

WebForm_DoPostBackWithOptions(options)

var

Page_ClientValidate(options.validationGroup);

(validationResult)

(typeof(document.activeElement)

undefined)

__doPostBack(options.eventTarget,

在开始的时候调用Page_ClientValidate进行Client端的Validation。

在这里执行所有的Client端的Validation。

我们来着重分析上面的javascript看看具体的流程。

Page_ClientValidate被定义在Javascript2中。

function

Page_ClientValidate(validationGroup)

null;

ValidatorValidate(Page_Validators[i],

validationGroup,

ValidationSummaryOnSubmit(validationGroup);

Page_BlockSubmit

上面的code中首先通过Page_Validators判断是否Page中定义了Validator

control。

我们在预先定义了Page_Validators

Array还记得我们之前介绍的两个Array——Page_ValidationSummaries和Page_Validators吗。

虽有遍历所有的Validator

control并调用ValidatorValidate方法执行每个Validator

control的Client端的Validation。

我们进一步看看ValidatorValidate又是如何定义的ValidatorValidate定义在Javascript2中

function

(typeof(val.evaluationfunction)

function)

首先通过IsValidationGroupMatch判断Validator

control的ValidationGroup是否和触发Postaback的Control对应的ValidationGroup相互匹配。

因为只有在匹配的前提下才进行相关Validator

control的validation。

然后调用validator

function来进行validation。

通过前面的分析我们知道RequiredFieldValidator的evaluationfunction为RequiredFieldValidatorEvaluateIsValid而CustomValidator的evaluationfunction为CustomValidatorEvaluateIsValid。

我们来看看这两个function是如何定义的。

他们都定义在Javascript2中。

RequiredFieldValidatorEvaluateIsValid通过正则表达式验证是否填入了由意义的值。

function

RequiredFieldValidatorEvaluateIsValid(val)

return

(ValidatorTrim(ValidatorGetValue(val.controltovalidate))

ValidatorTrim(val.initialvalue))

function

ValidatorGetValueRecursive(control);

function

ValidatorGetValueRecursive(control)

string

ValidatorGetValueRecursive(control.childNodes[i]);

(val

s.match(/^/s*(/S(/s/S)*)/s*$/);

return

CustomValidatorEvaluateIsValid实际上就是调用我们为CustomValidator设置的ClientValidationFunction。

function

CustomValidatorEvaluateIsValid(val)

var

ValidatorGetValue(val.controltovalidate);

((typeof(val.validateemptytext)

string)

(typeof(val.clientvalidationfunction)

string)

eval(val.clientvalidationfunction

(val,

在ValidatorValidate中当我们通过调用各个Validator

control的evaluationfunction来进行Client端的验证后对于没有通过验证的Validator

control通过调用ValidatorSetFocus设置相应控件的焦点。

在这里就不在深入探讨了。

接着通过调用ValidatorUpdateDisplay来根据我们制定的Display和不同浏览器来设置Error

function

((navigator.userAgent.indexOf(Mac)

-1)

(navigator.userAgent.indexOf(MSIE)

-1))

实际上到现在为止所有的Validation工作已经完成。

我们来看看Error

message是如何显示的。

所以我们要看看ValidatorUpdateDisplay的定义了。

分析完ValidatorValidate我们在回到Page_ClientValidate上面。

现在我们接着分析一下的执行流程。

通过调用ValidatorValidate执行完各个Validator

control的验证后接着调用的是ValidatorUpdateIsValid()和ValidationSummaryOnSubmit(validationGroup)。

ValidatorUpdateIsValid通过遍历每个Validator

control来查看他们是否通过验证最终确定这个Page是否通过验证。

ValidationSummaryOnSubmit通过拼接字符串的形式在ValidationSummary显示对应的Error

function

AllValidatorsValid(Page_Validators);

function

ValidationSummaryOnSubmit(validationGroup)

(typeof(Page_ValidationSummaries)

undefined)

Page_ValidationSummaries.length;

sums)

Page_ValidationSummaries[sums];

none;

IsValidationGroupMatch(summary,

validationGroup))

typeof(Page_Validators[i].errormessage)

string)

Page_Validators[i].errormessage

post;

typeof(Page_Validators[i].errormessage)

string)

Page_Validators[i].errormessage;

lastValIndex)

Page_Validators[i].errormessage;

lastValIndex)

Page_Validators[i].errormessage

break;

前面我们花了很大的篇幅介绍了Client端的Validation通过介绍我们知道了Client端的validation和Error

message的显示均由Javascript来完成。

现在我们来简单看看Server

端__doPostBack被调用实现向Server端的Postback。

具体的Postback可以参考我的文章浅谈ASP.NET的Postback。

Validator

Contro

比如下面是一段CustomValidator的Validation。

protected

如果上面的Validation没有通过最终render在client段的将有下面一段Html。