Javascript中怎么实现一个.NET验证控件功能

Javascript中怎么实现一个.NET验证控件功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

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

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

在页面上解析成：

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

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

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

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

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

添加验证span

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

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

添加脚本

<scriptlanguagescriptlanguage="javascript"type="text/javascript"> varIsSelectID='<%=cbSelect.ClientID%>';  vartxtUserName='<%=txtUserName.ClientID%>';  functionajusSelectValidator(checkbox,validatorID){  ajustValidator(checkbox,validatorID,txtUserName);  }  </script> //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<Page_Validators.length;i++){  if(Page_Validators[i]==validator){  Page_Validators.splice(i,1);  i--;  }  }  validator.style.display="none";  ValidatorOnLoad();  }  }

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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。