Javascript中怎么實(shí)現(xiàn)一個(gè).NET驗(yàn)證控件功能

Javascript中怎么實(shí)現(xiàn)一個(gè).NET驗(yàn)證控件功能，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

首先我們看看.NET驗(yàn)證控件，在頁面上做了什么事情。

<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>

驗(yàn)證控件在頁面變?yōu)榱艘粋€(gè)隱藏的span，需要驗(yàn)證的時(shí)候，進(jìn)行顯示。

同時(shí)頁面上出現(xiàn)了一些用于驗(yàn)證的腳步

<scripttypescripttype="text/javascript"> //<![CDATA[  //驗(yàn)證控件的集合，當(dāng)添加一個(gè)驗(yàn)證控件的時(shí)候，就會多一個(gè)item  varPage_Validators=newArray(document.getElementById("RequiredFieldValidator1"));  //]]> </script> <scripttypescripttype="text/javascript"> //<![CDATA[  varRequiredFieldValidator1=document.all?document.all["RequiredFieldValidator1"]:document.getElementById("RequiredFieldValidator1");//找到驗(yàn)證控件  RequiredFieldValidator1.controltovalidate="txtValidator";//綁定需要驗(yàn)證的控件  RequiredFieldValidator1.errormessage="RequiredFieldValidator";//顯示未驗(yàn)證通過的錯(cuò)誤信息  RequiredFieldValidator1.evaluationfunction="RequiredFieldValidatorEvaluateIsValid";//用于驗(yàn)證的方法  RequiredFieldValidator1.initialvalue="";  //]]> </script> <scripttypescripttype="text/javascript"> //<![CDATA[  varPage_ValidationActive=false;  if(typeof(ValidatorOnLoad)=="function"){  ValidatorOnLoad();  }  functionValidatorOnSubmit(){  if(Page_ValidationActive){  returnValidatorCommonOnSubmit();  }  else{  returntrue;  }  }  //]]> </script>

我們通過構(gòu)造類似的腳本進(jìn)行控件驗(yàn)證

添加驗(yàn)證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;">*

該項(xiàng)不能為空</span>//添加span,用于顯示驗(yàn)證信息

添加腳本

<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";  }  }  //添加驗(yàn)證關(guān)聯(lián)  functionregister(validatorID,controltoValidateId){  Page_Validators.push(document.getElementById(validatorID));  varspan=document.getElementById(validatorID);  spanTest.controltovalidate=controltoValidateId;   span.errormessage="*該項(xiàng)不能為空";  span.display="Dynamic";  span.evaluationfunction="RequiredFieldValidatorEvaluateIsValid";  span.initialvalue="";  //spanTest.style.visibility="visible";  ValidatorOnLoad();  }  //取消驗(yàn)證關(guān)聯(lián)  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:如果頁面上沒有驗(yàn)證控件的話，直接執(zhí)行上面的代碼會出錯(cuò)的，因?yàn)镻age_Validators為null，直接往里面push為拋異常。所以用的時(shí)候，要加一個(gè)驗(yàn)證的控件。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。