新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
使用Javascript實現.NET驗證控件功能
在我們平時經常會遇到這樣的一個問題:當我們選擇checkbox時,希望驗證一個控件,取消選擇,隱藏并取消驗證這個控件。如果完全使用服務器事件來實現此功能,肯定用戶體現不好,所以我們可以使用javascript實現.net驗證控件功能。

十余年的廣豐網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。成都全網營銷的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同,自動調整廣豐建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“廣豐網站設計”,“廣豐網站推廣”以來,每個客戶項目都認真落實執(zhí)行。
首先我們看看.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
驗證控件在頁面變?yōu)榱艘粋€隱藏的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";
- }
- }
- //添加驗證關聯(lián)
- 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();
- }
- //取消驗證關聯(lián)
- 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:如果頁面上沒有驗證控件的話,直接執(zhí)行上面的代碼會出錯的,因為Page_Validators為null,直接往里面push為拋異常。所以用的時候,要加一個驗證的控件。
【編輯推薦】
- jQuery調用WCF服務傳遞JSON對象
- JavaScript解析Json字符串 眾瀏覽器性能比較
- Services_JSON 1.0.0版發(fā)布
- 使用JSONP解決跨域數據訪問問題
- JSON與JAVA的數據轉換
網站名稱:使用Javascript實現.NET驗證控件功能
文章地址:http://fisionsoft.com.cn/article/djdocis.html


咨詢
建站咨詢
