为了实现验证,.net提供了一个javascript脚本,当我们生成一个asp.net页面时,通过查看页面源代码的方式,会发现都调用了下面一个javascript文件:
<script src="WebResource.axd" type="text/javascript"> </script>
asp.net的大部分验证都是通过这个文件进行的,下面我就以一个最简单的必入项验证控件来说明一下:
第一步:
当进入页面时首先赋值:var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
然后会根据这个变量的值遍历进行验证,
接着调用ValidatorOnLoad方法,然后在这个方法中调用ValidatorHookupControlID,ValidatorHookupControl,ValidatorHookupEvent
最主要是在ValidatorHookupEvent中给控件加载事件
eval("control." + eventType + " = func;");
比如onblue,onkeypress,onchange等事件
接下来根据加载的事件当事件发生时调用对应的方法
第二步:
当用户输入时调用ValidatedTextBoxOnKeyPress,主要是用来判断用户是否输入了回车键,如果是的话触发验证
第三步:
当用户输入回车或者离开焦点时调用以下方法进行验证:
ValidatorOnChange,ValidatorValidate,IsValidationGroupMatch,RequiredFieldValidatorEvaluateIsValid,ValidatorGetValue,
ValidatorTrim,ValidatorUpdateDisplay,ValidatorUpdateIsValid,AllValidatorsValid
主要就是根据用户的输入进行判断,决定是否显示错误信息:val.style.display = val.isvalid ? "none" : "inline";
附修改后的带有一个必入项验证的页面源码(将WebResource.axd文件中相应的方法都移到本页面了)
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
<
head
><
title
>
无标题页
</
title
></
head
>
<
body
>
<
form
>
<
div
>
<
input type
=
"
hidden
"
name
=
"
__VIEWSTATE
"
id
=
"
__VIEWSTATE
"
value
=
"
/wEPDwULLTE5MDkxNzgwODFkZKLnaM8iGUsgGiWldhYd7fCPmt6s
"
/>
</
div
>
<
div
>
<
input name
=
"
TextBox1
"
type
=
"
text
"
id
=
"
TextBox1
"
/>
<
span id
=
"
RequiredFieldValidator1
"
style
=
"
color:Red;display:none;
"
>
RequiredFieldValidator
</
span
></
div
>
<
script type
=
"
text/javascript
"
>
<!--
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//
页面加载时执行的方法
var Page_ValidationVer
=
"
125
"
;
var Page_IsValid
=
true
;
var Page_BlockSubmit
=
false
;
var Page_InvalidControlToBeFocused
=
null
;
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorOnLoad()
{
if (typeof(Page_Validators) == "undefined")
return;
var i, val;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
for (i = 0; i < Page_Validators.length; i++)
{
val = Page_Validators[i];
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.evaluationfunction) == "string")
{
eval("val.evaluationfunction = " + val.evaluationfunction + ";");
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.isvalid) == "string")
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (val.isvalid == "False")
{
val.isvalid = false;
Page_IsValid = false;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
val.isvalid = true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
} else
{
val.isvalid = true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.enabled) == "string")
{
val.enabled = (val.enabled != "False");
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.controltovalidate) == "string")
{
ValidatorHookupControlID(val.controltovalidate, val);
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.controlhookup) == "string")
{
ValidatorHookupControlID(val.controlhookup, val);
}
}
Page_ValidationActive = true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorHookupControlID(controlID, val)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(controlID) != "string")
{
return;
}
var ctrl = document.getElementById(controlID);
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(ctrl) != "undefined") && (ctrl != null))
{
ValidatorHookupControl(ctrl, val);
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
val.isvalid = true;
val.enabled = false;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorHookupControl(control, val)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(control.tagName) != "string")
{
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (control.tagName != "INPUT" && control.tagName != "TEXTAREA" && control.tagName != "SELECT")
{
var i;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
for (i = 0; i < control.childNodes.length; i++)
{
ValidatorHookupControl(control.childNodes[i], val);
}
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(control.Validators) == "undefined")
{
control.Validators = new Array;
var eventType;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (control.type == "radio")
{
eventType = "onclick";
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
} else
{
eventType = "onchange";
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.focusOnError) == "string" && val.focusOnError == "t")
{
ValidatorHookupEvent(control, "onblur", "ValidatedControlOnBlur(event); ");
}
}
ValidatorHookupEvent(control, eventType, "ValidatorOnChange(event); ");
if (control.type == "text" ||
control.type == "password" ||
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
control.type == "file")
{
ValidatorHookupEvent(control, "onkeypress",
"if (!ValidatedTextBoxOnKeyPress(event)) { event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); return false; } ");
}
}
control.Validators[control.Validators.length] = val;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorHookupEvent(control, eventType, functionPrefix)
{
var ev;
eval("ev = control." + eventType + ";");
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(ev) == "function")
{
ev = ev.toString();
ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
ev = "";
}
var func;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (navigator.appName.toLowerCase().indexOf('explorer') > -1)
{
func = new Function(functionPrefix + " " + ev);
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
func = new Function("event", functionPrefix + " " + ev);
}
eval("control." + eventType + " = func;");
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//
按键事件
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatedTextBoxOnKeyPress(
event
)
{
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (event.keyCode == 13)
{
ValidatorOnChange(event);
var vals;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(event.srcElement) != "undefined") && (event.srcElement != null))
{
vals = event.srcElement.Validators;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
vals = event.target.Validators;
}
return AllValidatorsValid(vals);
}
return true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
//
离开焦点依次执行以下方法
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorOnChange(
event
)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (!event)
{
event = window.event;
}
Page_InvalidControlToBeFocused = null;
var targetedControl;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(event.srcElement) != "undefined") && (event.srcElement != null))
{
targetedControl = event.srcElement;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
targetedControl = event.target;
}
var vals;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(targetedControl.Validators) != "undefined")
{
vals = targetedControl.Validators;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
else
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (targetedControl.tagName.toLowerCase() == "label")
{
targetedControl = document.getElementById(targetedControl.htmlFor);
vals = targetedControl.Validators;
}
}
var i;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
for (i = 0; i < vals.length; i++)
{
ValidatorValidate(vals[i], null, event);
}
ValidatorUpdateIsValid();
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorValidate(val, validationGroup,
event
)
{
val.isvalid = true;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, validationGroup))
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.evaluationfunction) == "function")
{
val.isvalid = val.evaluationfunction(val);
if (!val.isvalid && Page_InvalidControlToBeFocused == null &&
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
typeof(val.focusOnError) == "string" && val.focusOnError == "t")
{
ValidatorSetFocus(val, event);
}
}
}
ValidatorUpdateDisplay(val);
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function IsValidationGroupMatch(control, validationGroup)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(validationGroup) == "undefined") || (validationGroup == null))
{
return true;
}
var controlGroup = "";
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(control.validationGroup) == "string")
{
controlGroup = control.validationGroup;
}
return (controlGroup == validationGroup);
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function RequiredFieldValidatorEvaluateIsValid(val)
{
return (ValidatorTrim(ValidatorGetValue(val.controltovalidate)) != ValidatorTrim(val.initialvalue))
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorGetValue(id)
{
var control;
control = document.getElementById(id);
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(control.value) == "string")
{
return control.value;
}
return ValidatorGetValueRecursive(control);
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorTrim(s)
{
var m = s.match(/^/s*(/S+(/s+/S+)*)/s*$/);
return (m == null) ? "" : m[1];
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorUpdateDisplay(val)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (typeof(val.display) == "string")
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (val.display == "None")
{
return;
}
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (val.display == "Dynamic")
{
val.style.display = val.isvalid ? "none" : "inline";
return;
}
}
if ((navigator.userAgent.indexOf("Mac") > -1) &&
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
(navigator.userAgent.indexOf("MSIE") > -1))
{
val.style.display = "inline";
}
val.style.visibility = val.isvalid ? "hidden" : "visible";
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function ValidatorUpdateIsValid()
{
Page_IsValid = AllValidatorsValid(Page_Validators);
}
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
function AllValidatorsValid(validators)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if ((typeof(validators) != "undefined") && (validators != null))
{
var i;
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
for (i = 0; i < validators.length; i++)
{
![](https://i-blog.csdnimg.cn/blog_migrate/3112b7b6526db5bc83e275260ae60525.gif)
if (!validators[i].isvalid)
{
return false;
}
}
}
return true;
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
var Page_Validators
=
new
Array(document.getElementById(
"
RequiredFieldValidator1
"
));
//
-->
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
script type
=
"
text/javascript
"
>
<!--
var RequiredFieldValidator1
=
document.all
?
document.all[
"
RequiredFieldValidator1
"
] : document.getElementById(
"
RequiredFieldValidator1
"
);
RequiredFieldValidator1.controltovalidate
=
"
TextBox1
"
;
RequiredFieldValidator1.errormessage
=
"
RequiredFieldValidator
"
;
RequiredFieldValidator1.display
=
"
Dynamic
"
;
RequiredFieldValidator1.evaluationfunction
=
"
RequiredFieldValidatorEvaluateIsValid
"
;
RequiredFieldValidator1.initialvalue
=
""
;
//
-->
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
div
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
input type
=
"
hidden
"
name
=
"
__EVENTVALIDATION
"
id
=
"
__EVENTVALIDATION
"
value
=
"
/wEWAgLl/7L9DwLs0bLrBmRIrZczy6wbyzMNEvjnHwL+7PHV
"
/>
</
div
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
<
script type
=
"
text/javascript
"
>
<!--
var Page_ValidationActive
=
false
;
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
if
(
typeof
(ValidatorOnLoad)
==
"
function
"
)
{
ValidatorOnLoad();
}
//
-->
</
script
>
</
form
>
</
body
>
</
html
>