在我們平時(shí)經(jīng)常會(huì)遇到這樣的一個(gè)問(wèn)題：當(dāng)我們選擇checkbox時(shí)，希望驗(yàn)證一個(gè)控件，取消選擇，隱藏并取消驗(yàn)證這個(gè)控件。如果完全使用服務(wù)器事件來(lái)實(shí)現(xiàn)此功能，肯定用戶體現(xiàn)不好，所以我們可以使用javascript實(shí)現(xiàn).net驗(yàn)證控件功能。

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

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

在頁(yè)面上解析成：

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

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

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

<scripttypescripttype="text/javascript"> 
//<![CDATA[  
//驗(yàn)證控件的集合，當(dāng)添加一個(gè)驗(yàn)證控件的時(shí)候，就會(huì)多一個(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)證通過(guò)的錯(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> 

我們通過(guò)構(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è)面上沒(méi)有驗(yàn)證控件的話，直接執(zhí)行上面的代碼會(huì)出錯(cuò)的，因?yàn)镻age_Validators為null，直接往里面push為拋異常。所以用的時(shí)候，要加一個(gè)驗(yàn)證的控件。

【編輯推薦】

1. jQuery調(diào)用WCF服務(wù)傳遞JSON對(duì)象
2. JavaScript解析Json字符串 眾瀏覽器性能比較
3. Services_JSON 1.0.0版發(fā)布
4. 使用JSONP解決跨域數(shù)據(jù)訪問(wèn)問(wèn)題
5. JSON與JAVA的數(shù)據(jù)轉(zhuǎn)換