Use Javascript to implement. NET verification controls

We often encounter this problem: when we select checkbox, we want to verify a control, cancel the selection, hide and cancel the verification. If you fully use server events to implement this function, the user will certainly be poor, so we can use javascript to implement the. net verification control function.

First, let's take a look at what the. NET verification control does on the page.

 
 

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

Analyzed on the page as follows:

 
 

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

The verification control is changed to a hidden span on the page and displayed when verification is required.

At the same time, there are some steps for verification on the page

 
 

  
  
<ScripttypeScripttype="Text/javascript"> 
  
  
//<! [CDATA [ 
  
  
// Set of verification controls. When a verification control is added, an item is added. 
  
  
VarPage_Validators = newArray (document. getElementById ("RequiredFieldValidator1 ")); 
  
  
//]> 
  
  
</Script> 
  
  
<ScripttypeScripttype="Text/javascript"> 
  
  
//<! [CDATA [ 
  
  
VarRequiredFieldValidator1 = document. all? Document. all ["RequiredFieldValidator1"]: document. getElementById ("RequiredFieldValidator1"); // locate the verification control 
  
  
RequiredFieldValidator1.controltovalidate = "txtValidator"; // bind the control to be verified 
  
  
RequiredFieldValidator1.errormessage = "RequiredFieldValidator"; // displays error messages that fail Verification 
  
  
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid"; // Method for verification 
  
  
RequiredFieldValidator1.initialvalue = ""; 
  
  
//]> 
  
  
</Script> 
  
  
<ScripttypeScripttype="Text/javascript"> 
  
  
//<! [CDATA [ 
  
  
VarPage_ValidationActive = false; 
  
  
If (typeof (ValidatorOnLoad) = "function "){ 
  
  
ValidatorOnLoad (); 
  
  
} 
  
  
FunctionValidatorOnSubmit (){ 
  
  
If (Page_ValidationActive ){ 
  
  
ReturnValidatorCommonOnSubmit (); 
  
  
} 
  
  
Else { 
  
  
Returntrue; 
  
  
} 
  
  
} 
  
  
//]> 
  
  
</Script> 
 
 

We construct similar scripts for control verification.

Add verification span

 
 

  
  
<Asp: CheckBoxIDAsp: CheckBoxID= "CbSelect"Runat= "Server"Text= "Select"Onclick= "AjusSelectValidator (this, 'spantxtusername ')"/> 
  
  
<Asp: TextBoxIDAsp: TextBoxID= "TxtUserName"Runat= "Server"></Asp: TextBox> 
  
  
<SpanidSpanid= "SpantxtUserName"Style= "Color: Red; display: none ;">*
 
 

This item cannot be blank </span> // Add a span to display verification information

Add script

 
 

  
  
<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";
  
  
}
  
  
}
  
  
// Add verification Association
  
  
Functionregister (validatorID, controltoValidateId ){
  
  
Page_Validators.push (document. getElementById (validatorID ));
  
  
Varspan=Document. GetElementById (validatorID );
  
  
SpanTest. controltovalidate=ControltoValidateId;
  
  
 
  
  
Span. errormessage="* This item cannot be blank";
  
  
Span. display="Dynamic";
  
  
Span. evaluationfunction="RequiredFieldValidatorEvaluateIsValid";
  
  
Span. initialvalue="";
  
  
//SpanTest. style. visibility="Visible";
  
  
ValidatorOnLoad ();
  
  
}
  
  
// Cancel the authentication Association
  
  
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: If the control is not verified on the page, an error occurs when you directly execute the code above. Because Page_Validators is null, push directly to the control and throw an exception. Therefore, you must add a verification control when using it.

1. JQuery calls the WCF Service to pass JSON objects
2. Comparison of the performance of JavaScript-parsed Json strings in various browsers
3. Services_JSON version 1.0.0 released
4. Use JSONP to solve cross-Origin data access problems
5. Data conversion between JSON and JAVA