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為拋異常。所以用的時候，要加一個驗證的控件。

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