使用Javascript实现.NET验证控件功能

在我们平时经常会遇到这样的一个问题：当我们选择checkbox时，希望验证一个控件，取消选择，隐藏并取消验证这个控件。如果完全使用服务器事件来实现此功能，肯定用户体现不好，所以我们可以使用javascript实现.net验证控件功能。

十余年的广丰网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整广丰建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“广丰网站设计”,“广丰网站推广”以来，每个客户项目都认真落实执行。

首先我们看看.NET验证控件，在页面上做了什么事情。

 
 
 
  
  
  
<asp:TextBoxIDasp:TextBoxID="txtValidator"runat="server"> 
  
  
  
<asp:RequiredFieldValidatorIDasp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"  
  
  
  
ControlToValidate="txtValidator"ErrorMessage="RequiredFieldValidator"> 
 
 

在页面上解析成：

 
 
 
  
  
  
<inputnameinputname="txtValidator"type="text"id="Text1"/> 
  
  
  
<spanidspanid="Span1"style="color:Red;visibility:hidden;">RequiredFieldValidator 
 
 

验证控件在页面变为了一个隐藏的span，需要验证的时候，进行显示。

同时页面上出现了一些用于验证的脚步

 
 
 
  
  
  
<scripttypescripttype="text/javascript"> 
  
  
  
//  
  
  
//验证控件的集合，当添加一个验证控件的时候，就会多一个item  
  
  
  
varPage_Validators=newArray(document.getElementById("RequiredFieldValidator1"));  
  
  
  
//]]> 
  
  
  
 
  
  
  
<scripttypescripttype="text/javascript"> 
  
  
  
//  
  
  
varRequiredFieldValidator1=document.all?document.all["RequiredFieldValidator1"]:document.getElementById("RequiredFieldValidator1");//找到验证控件  
  
  
  
RequiredFieldValidator1.controltovalidate="txtValidator";//绑定需要验证的控件  
  
  
  
RequiredFieldValidator1.errormessage="RequiredFieldValidator";//显示未验证通过的错误信息  
  
  
  
RequiredFieldValidator1.evaluationfunction="RequiredFieldValidatorEvaluateIsValid";//用于验证的方法  
  
  
  
RequiredFieldValidator1.initialvalue="";  
  
  
  
//]]> 
  
  
  
 
  
  
  
<scripttypescripttype="text/javascript"> 
  
  
  
//  
  
  
varPage_ValidationActive=false;  
  
  
  
if(typeof(ValidatorOnLoad)=="function"){  
  
  
  
ValidatorOnLoad();  
  
  
  
}  
  
  
  
functionValidatorOnSubmit(){  
  
  
  
if(Page_ValidationActive){  
  
  
  
returnValidatorCommonOnSubmit();  
  
  
  
}  
  
  
  
else{  
  
  
  
returntrue;  
  
  
  
}  
  
  
  
}  
  
  
  
//]]> 
  
  
  
 
 
 

我们通过构造类似的脚本进行控件验证

添加验证span

 
 
 
  
  
  
<asp:CheckBoxIDasp:CheckBoxID="cbSelect"runat="server"Text="选择"onclick="ajusSelectValidator(this,'spantxtUserName')"/> 
  
  
  
<asp:TextBoxIDasp:TextBoxID="txtUserName"runat="server"> 
  
  
  
<spanidspanid="spantxtUserName"style="color:Red;display:none;">* 
 
 

该项不能为空//添加span,用于显示验证信息

添加脚本

 
 
 
  
  
  
<scriptlanguagescriptlanguage="javascript"type="text/javascript"> 
  
  
  
varIsSelectID='<%=cbSelect.ClientID%>';  
  
  
  
vartxtUserName='<%=txtUserName.ClientID%>';  
  
  
  
functionajusSelectValidator(checkbox,validatorID){  
  
  
  
ajustValidator(checkbox,validatorID,txtUserName);  
  
  
  
}  
  
  
  
 
  
  
  
//Validator.Js  
  
  
  
functionajustValidator(checkbox,validatorID,controltoHideID){  
  
  
  
if(checkbox.checked){  
  
  
  
register(validatorID,controltoHideID);  
  
  
  
document.getElementById(controltoHideID).style.visibility="visible";  
  
  
  
}  
  
  
  
else{  
  
  
  
removeValidator(validatorID);  
  
  
  
document.getElementById(controltoHideID).style.visibility="hidden";  
  
  
  
}  
  
  
  
}  
  
  
  
//添加验证关联  
  
  
  
functionregister(validatorID,controltoValidateId){  
  
  
  
Page_Validators.push(document.getElementById(validatorID));  
  
  
  
varspan=document.getElementById(validatorID);  
  
  
  
spanTest.controltovalidate=controltoValidateId;  
  
  
  
 
  
  
  
span.errormessage="*该项不能为空";  
  
  
  
span.display="Dynamic";  
  
  
  
span.evaluationfunction="RequiredFieldValidatorEvaluateIsValid";  
  
  
  
span.initialvalue="";  
  
  
  
//spanTest.style.visibility="visible";  
  
  
  
ValidatorOnLoad();  
  
  
  
}  
  
  
  
//取消验证关联  
  
  
  
functionremoveValidator(validatorID){  
  
  
  
varvalidator=document.getElementById(validatorID);  
  
  
  
if(validator){  
  
  
  
for(vari=0;i;i++){  
  
  
  
if(Page_Validators[i]==validator){  
  
  
  
Page_Validators.splice(i,1);  
  
  
  
i--;  
  
  
  
}  
  
  
  
}  
  
  
  
validator.style.display="none";  
  
  
  
ValidatorOnLoad();  
  
  
  
}  
  
  
  
} 
 
 

PS:如果页面上没有验证控件的话，直接执行上面的代码会出错的，因为Page_Validators为null，直接往里面push为抛异常。所以用的时候，要加一个验证的控件。

【编辑推荐】

1. jQuery调用WCF服务传递JSON对象
2. JavaScript解析Json字符串 众浏览器性能比较
3. Services_JSON 1.0.0版发布
4. 使用JSONP解决跨域数据访问问题
5. JSON与JAVA的数据转换