[Original] fineui Secret Garden (9)-Form Verification

Form Verification is an essential part of web development. It is used to restrict the standardization and consistency of user input data. So how can we simplify this task so that developers can achieve the goal through simple attribute settings?

Fineui is also a little more effort at this point, than ASP. net native comparevalidator, rangevalidator, requiredfieldvalidator and other controls are much easier to use. The following describes how to perform Form Verification in fineui.

 

How to verify the form?

You can perform the Form Verification in the following two steps.

1. Set verification properties for each form control.

For example, if you set the required = "true" and showredstar = "true" attributes for Textbox, this input is required and a red asterisk is displayed after the label. The details will be explained in the next section.

 

2. Set the form to be verified using the button property.

Validateforms: List of form names to be verified (separated by commas). You can specify multiple forms to be verified when you click the button.

Validatetarget: the pop-up position of the prompt dialog box when verification fails. It can be target. Self, target. parent, and target. Top. On the frame page, you may want the prompt to overwrite the entire page, not just part of the IFRAME page.

 

 

In addition, there are also some attributes used to control the form verification behavior, divided into three levels of control:

1. Web. config-Level Control

The parameters formmessagetarget, formoffsetright, formlabelwidth, and formlabelseparator are set respectively. They are described in detail in "fineui Secret Garden (III)-Deep Web. config.

 

2. pagemanager-Level Control

These four attributes are also described in detail in "fineui Secret Garden (4)-each page needs a pagemanager.

 

3. Form and simpleform form-Level Control

The labelwidth and labelseparator attributes can be used for control.

 

Common attributes related to Form Controls and Verification

The so-called general attributes refer to the verification attributes of form controls such as dropdownlist, datepicker, numberbox, textarea, and textbox. They can be divided into the following categories:

 

1. required?

• Required (Boolean): Required
• Requiredmessage (string): prompt message when it is null

 

2. Regular Expression

• RegEx (string): the regular expression that must be satisfied
• Regexmessage (string): prompt information when the regular expression is not satisfied
• Regexpattern (enumeration): A common regular expression type.
  • Regexpattern. Number: Number
  • Regexpattern. ALPHA: uppercase and lowercase letters
  • Regexpattern. alpha_numeric: letters and numbers
  • Regexpattern. alpha_underline: letter and underline
  • Regexpattern. alpha_numeric_underline: alphanumeric and underline
  • Regexpattern. alpha_lower_case: lowercase letter
  • Regexpattern. alpha_upper_case: uppercase letters
  • Regexpattern. Email: Email
  • Regexpattern. url: URL
  • Regexpattern. postal_code: Zip code
  • Regexpattern. ip_address: IP Address
  • Regexpattern. identity_card: ID card number (good, there are 18-digit ID card numbers in China)

Regexpattern is very useful and has many built-in regular expressions that we often use.

 

3. length limit

• Maxlength (integer): Maximum length
• Maxlengthmessage (string): message displayed when the maximum length is exceeded
• Minlength (integer): Minimum Length
• Minlengthmessage (string): message displayed when the minimum length is less

 

4. comparison (including comparison with control values and constant values)

• Comparecontrol (string): Control ID to be compared
• Comparevalue (string): value to be compared
• Compareoperator (enumeration): comparison operator
  • Operator. Equal (default)
  • Operator. greaterthan
  • Operator. greaterthanequal
  • Operator. lessthan
  • Operator. lessthanequal
  • Operator. notequal
• Comparetype (enumeration): comparison type
  • Comparetype. Float
  • Comparetype. int
  • Comparetype. String (default)
• Comparemessage (string): prompt message when the comparison condition is not met

Comparetype sometimes plays a key role. For example, if you do not set comparetype when comparing values in two numeric input boxes, the value "3" is greater than "10 ".

 

 

Restricted attributes unique to Form Controls

Some controls have their own restricted attributes, which are listed below.

1. Date Selection Control (datepicker)

• Mindate (date): Minimum date limit
• Maxdate (date): Maximum date limit

 

2. Number input box (numberbox)

• Minvalue (floating point number): Minimum value
• Maxvalue (floating point number): Maximum Value
• Nonegative (Boolean): negative numbers are not allowed
• Nodecimal (Boolean): decimal is not allowed
• Decimalprecision (integer): number of digits after the decimal point (2 by default)

 

Client verification example

1. Verify multiple forms at the same time

This is very simple. You only need to specify the form ID in validateforms (separated by commas ).

<Ext: button id = "btnsubmitall" text = "verify two forms and submit" runat = "server" onclick = "btnsubmitall_click" validateforms = "extform1, extform2"/>

 

2. Common verification examples

 

The end date is later than the start date:

1: <Ext: datepicker id = "datepicker1" label = "Start Date" required = "true" runat = "server">

   2:  </ext:DatePicker>

3: <Ext: datepicker id = "datepicker2" label = "End Date (greater than the start date)" required = "true" comparecontrol = "datepicker1"

4: compareoperator = "greaterthan" comparemessage = "the end date must be later than the start date! "Runat =" server ">

   5:  </ext:DatePicker>

 

 

Determine whether two text boxes are equal:

1: <Ext: textbox id = "textbox1" required = "true" label = "text box 1" runat = "server">

   2:  </ext:TextBox>

3: <Ext: textbox id = "textbox2" required = "true" label = "text box 2 (equal to text box 1)" comparecontrol = "textbox1"

4: compareoperator = "equal" comparemessage = "text box 2 should be equal to text box 1! "Runat =" server ">

   5:  </ext:TextBox>

 

 

One digit is greater than the other digit:

1: <Ext: numberbox id = "numberbox1" required = "true" label = "number box 1" runat = "server">

   2:  </ext:NumberBox>

3: <Ext: numberbox id = "numberbox2" required = "true" label = "number box 2 (greater than or equal to the number box 1)" comparecontrol = "numberbox1"

4: compareoperator = "greaterthanequal" comparemessage = "number Box 2 should be greater than or equal to the number box 1! "Runat =" server ">

   5:  </ext:NumberBox>

 

 

Compare two values by integer type:

1: <Ext: Label id = "label1" runat = "server" label = "label 1" text = "88">

   2:  </ext:Label>

3: <Ext: textbox id = "textbox3" required = "true" label = "text box 3 (greater than or equal to label 1)" comparecontrol = "label1"

4: compareoperator = "greaterthanequal" comparetype = "int" comparemessage = "text box 3 should be greater than or equal to label 1! "

   5:      runat="server">

   6:  </ext:TextBox>

 

 

How does one perform server-side verification?

In addition to client verification, sometimes we have to perform verification in the background. For example, when a user is registered to check that the user's user name is valid, it is necessary to query the database in the background to know.

 

In this case, we hope that fineui can provide a simple interface to achieve the same effect of client verification. Fortunately, fineui has taken this common requirement into consideration and provides an interface for it. The following is a simple example.

 

For example, we have a user registry ticket. The system uses "admin" as the system reserved word and restricts user registration. The final result is as follows:

 

The implementation code is as follows:

   1:  <ext:SimpleForm ID="SimpleForm1" runat="server" Width="500px" BodyPadding="5px" EnableBackgroundColor="true"

2: Title = "User registry ticket">

   3:      <Items>

4: <Ext: textbox id = "tbxusername" runat = "server" label = "username" minlength = "3" required = "true"

   5:              ShowRedStar="True" Text="admin">

   6:          </ext:TextBox>

7: <Ext: textbox id = "tbxpassword" runat = "server" label = "password" required = "true" showredstar = "true"

   8:              TextMode="Password">

   9:          </ext:TextBox>

10: <Ext: button id = "btnregister" runat = "server" text = "register" onclick = "btnregister_click"

  11:              ValidateForms="SimpleForm1" ValidateTarget="Top">

  12:          </ext:Button>

  13:      </Items>

  14:  </ext:SimpleForm>

   1:  protected void btnRegister_Click(object sender, EventArgs e)

   2:  {

   3:      if (tbxUserName.Text == "admin")

   4:      {

5: tbxusername. markinvalid (string. Format ("'{0}' is a reserved word. Please select another one! ", Tbxusername. Text ));

   6:   

7: Alert. showintop ("form server Verification Failed! ");

   8:      }

   9:  }

The markinvalid in the text input box is the key to the code. It will add a prompt icon and text for the text input box as in client verification.

In addition, the clearinvalid method is provided to clear the verification failure mark.

 

Isn't it easy? There is nothing confusing, which is one of the reasons why fineui can attract a large number of developers.

 

Summary

Form Verification is a problem that every web developer will encounter. fineui provides developers with a series of simple means to quickly complete a common task, without even writing a line of C # code. Fineui also provides simple support for complex verification logic on the server.

 

 

In the next article, we will start with ASP. Net's sending-back mechanism and describe the implementation of Ajax in fineui and how to add Ajax features for the ASP. NET submit button.

 

 

 

Note: The articles in the "fineui Secret Garden" series were originally published on sanshenshi, And the blog garden was first launched. Please indicate the source for reprinting. Document Catalog official forum