Come on, let the dog day verification come more intense!

Introduction

Are you bothered by such verification on the page:

 
Function checkform () {If (document. getelementbyid ("<% = This. textbox1.clientid %> "). value. length = 0) {alert ("cannot be blank"); Return false ;}
 

Or you have encapsulated the JS library, or you are using some JS verification plug-ins, but you still have to write regular expressions repeatedly, prompting information and waiting for the returned results. well, I'm bored like you! So I made a rough one. Today, I made it into a thatch house. Okay. Let's take a look at what verification is going on.

Introduction and use

Step 1: Introduce JS files and CSS files

Step 2: drag a verification control to select the verification type, whether it can be blank, and prompt information. In this example, I only select the verification type as email, then, the default value "no" is allowed, and the value "no" is not allowed. The default value is used for other settings,

Step 3: Start

3.1: At this time, the default prompt appears on the right side of the text box on the mouse hover. Of course, sometimes you can adjust the tip direction based on the layout, A submit button is also placed on the page to add a client event to it.

3.2: Click the submit button. The page does not change and verification fails.

3.3: Enter unmatched characters. When the text box loses focus, the system prompts that the verification fails.

3.4: the input format is correct. OK

Well, in fact, we chose two verification items, and the verification was done. I think it's pretty good. What do you think?

In fact, the text box is complete and basic verification is acceptable, but there are also many controls such as radio, radiobuttonlist, check, checkboxlist, select... go to his uncle. OK, I feel a lot better when I scold it. Let's continue:

Okay, it's okay, but the style of the verification reminder is ugly, and it's ugly in IE. If you have a better implementation, please send it to me, my JS and CSS are very bad: P. I am very grateful.

Principle

CheckSource codeAs you can see, textbox displays the HTML in the browser.CodeYes:

 

  <  Input  Type  = "Text"  Canempty  = "No"  Tip = "Enter the correct email address format"  Reg  = "^ \ W + ([-+.] \ W +) * @ \ W + ([-.] \ W + )*\. \ W + ([-.] \ W +) * $"  ID  = "Tctextbox1"  Name  = "Tctextbox1"  Gtbfieldid  = "19"  Class  = "Verifyfailure"  > 

 

The HTML code of select, checkboxlist, and checkbox is:

 

  <  Select  Reg  = "0 {1 ,}"  Tip  = "Select one"  ID  = "Dropdownlist1"  Name  = "Dropdownlist1"  Gtbfieldid  = "20"  Class  = "Verifyfailure" >  
  <  Option  Value  = ""  Selected  = "Selected"  > </  Option  >  
  <  Option  Value  = "Aaaaaaa"  > Aaaaaaa  </  Option  >  
  <  Option  Value  = "Bbbbbbb"  >  Bbbbbbb  </  Option  >  
  <  Option Value  = "Cvvvvvv"  >  Cvvvvvv  </  Option  >  

  </  Select  >  
  <  Table  Border  = "0"  Reg = "0 {3 ,}"  Tip  = "Select three"  ID  = "Checkboxlist1"  Original-title  = ""  Class  = "Verifyfailure"  >  
  <  Tbody  > <  Tr  >  
 <  TD  > <  Input  Type  = "Checkbox"  Name  = "Checkboxlist1 $0"  ID  = "Checkboxlist1_0"  > <  Label  For  = "Checkboxlist1_0"  >  Aaaa  </ Label  > </  TD  > <  TD  > <  Input  Type  = "Checkbox"  Name  = "Checkboxlist1 $1"  ID  = "Checkboxlist1_1"  > <  Label  For = "Checkboxlist1_1"  >  Bbb  </  Label  > </  TD  > <  TD  > <  Input  Type  = "Checkbox"  Name  = "Checkboxlist1 $2"  ID  = "Checkboxlist1_2" > <  Label  For  = "Checkboxlist1_2"  >  CCC  </  Label  > </  TD  >  
  </  Tr  >  
  </ Tbody  > </  Table  >  
  <  Span  Reg  = "0 {1 ,}"  Tip  = "Select"  Class  = "Verifyfailure"  > <  Input  Type  = "Radio" Value  = "Radiobutton1"  Name  = "Radiobutton1"  ID  = "Radiobutton1"  > </  Span  > 

Well, expanded the Textbox Control, added the custom attribute Reg regular expression, tip prompt information, whether canempty can be empty, then used Js for regular expression verification, and added and deleted CSS through the verification result, note that the code generated by checkbox and Radio has an additional span tag, checkboxlist, and radiobuttonlist, and the table tag is added. In the JS file, I separated their verification from the text box verification, independent of a checkaspnetradiocheckbox Method for verification. These controls can be extended to add labels, but I think there are more than one verification control.ProgramRather, it is a bad thing. You can find another employee for half a day. To weigh it off, we can compare it with an ugly method.

Postscript

Tip uses a jquery plug-in, tipsy. If you are interested, you can study it.

In fact, there are still a lot of work to be done: group verification, comparison of two text boxes, Ajax verification, the thought is not commonly used, so there is no need to add, the more features you cannot make the use more complex, in addition, JS has little skill, and the more functions it can only make code messy. These needs should be done with your own hands --!

Well, in general, there is no technical content, pure physical strength, and hope is given. 1. provide an idea for unknown friends. 2. I hope you can help us to make it easier to use. To be honest, it would be nice to use it if you develop small and medium projects. 3. With the help of everyone, your abilities are also improved. Good night, everyone. See you tomorrow. For server verification, please refer to this article.Article: Commonlibrary validation. I hope that the two types of verification can be combined in the Code Generator later.

Click here to download the source code. If you find it helpful, please help me with the Recommendations. Next time I click --!