Verify user input on the web form page

Walkthrough: Verify user input on the web forms page

Like any input form, the web form page requires you to ensure that the information entered by the user is valid and the format is correct. To make this common task simpler, you can use a verification control created specifically for web forms pages. The verification control allows you to check required items, data types, ranges, modes, and specific values only by setting properties. These controls automatically perform checks and include multiple ways to Display error messages to users. For an overview, see web form verification.

Security descriptionBy default, web forms pages automatically verify that no malicious user attempts to send scripts to your application. For more information, see script exploitation.

This walkthrough illustrates a simple web form page that you may create as a simple registration page. This page contains a text box that allows users to enter the login name, birth date, password, and re-enter the password. You will add a verification control to this page to ensure that you have entered values in all the boxes and the format of these values is correct.

To complete this walkthrough, you must have sufficient permissions to create an ASP. NET web application project on the computer where your web server is located.

The drill is divided into several smaller parts:

• Create a basic form by creating a project and web form page, and adding input controls and labels.
• Add a verification control. You will verify whether required items are entered, whether the user has entered a valid logon name and date, and whether the Password Matches.
• Test.

After completing the drill, there will be a form similar to the following.

 

Create a basic form

You can start by creating a form with an input control.

Create a form

The first step is to create a form. You will add a verification control to the form later. First, create a new Web application project and web form page.

Create a project and a form

1. On the File menu, point to new and click Project ".
2. In the Create Project dialog box, perform the following operations:
   1. In the project type pane, select Visual Basic project or Visual C # project ".
   2. In the template pane, select ASP. NET web applications ".
   3. In the location box, enter the complete URL (including http: //, server name, and project name) for your application ). IIS version 5 (or later) and. NET Framework must be installed on the Web server. If IIS is already installed on your computer, you can specify http://localhost. (If you normally use a proxy server to access the Internet, you may need to configure Internet Explorer to bypass the proxy server to use the local host .)

      When you click OK, a new web form project is created at the root of the Web server you specified. In addition, the new web form page named webform1.aspx is displayed on the web form designer in the design view.

      PromptIf you encounter problems when creating a web application project, see the "Web Access failed" dialog box.

3. If the page is not in grid mode, use the Properties windowPagelayoutSet propertyGridlayout.

   This step is optional, but it simplifies the layout of the form. If you want to, you can work in stream mode, but you must make some small adjustments to the position of the control on the page. In either case, the page will work in the same way.

Add input control

For this walkthrough, assuming you are creating a simple registration page, you will add controls to allow users to enter names (email addresses), birth dates, and passwords. The user enters the password twice for confirmation.

Add controls

1. From the "Web Forms" tab of the toolbox, add the following controls to the form and set theirIDAttribute:

   Widget	Purpose	Identifier
   Textbox	Enter User Name	Txtname
   Textbox	Enter the Date of birth	Txtbirthdate
   Textbox	Enter Password	Txtpassword
   Textbox	Repeat the password for confirmation	Txtpasswordagain
   Button	Submit Form	Btnregister ChangeTextSet the property to "register ".

2. SetTextmodeSet propertyPasswordWhen you type the password, they are displayed with an asterisk (*).
3. Add a label in front of the text box to indicate its functionality. If the web form page is in grid mode, addLabelControl and set theirTextAttribute. If the page is in stream mode, you only need to type static text before each box.
4. Adjust the font, size, and Widget layout as needed. For more information about the layout, see positioning HTML elements in the design view.

Add verification control

You can add a verification code if you have created an input form. Add the verification control (one control for each verification test to be executed) to the form to complete this operation. (You will add a total of seven verification controls to include all the tests that should be executed and one for displaying errors .) The verification tests executed include:

• Required Fields. Make sure that the user has entered a value for all four boxes.
• Name format. For this walkthrough, you will check whether the user's login name meets the typical email name mode:Name@domain.xxx. In this walkthrough, verification is not performed on whether the email name provided by the user is a valid email account.
• Date Format. The birth date entered by the user is verified to be a valid date. (During this drill, you will not verify whether the date is within a specific range .)
• Password Match. The password provided by the user in the two password boxes is verified.

Check whether required fields are entered.

Make sure that you have entered a value in all four text boxes, that is, all four text boxes are required fields.

Check whether required fields are entered.

1. From the "Web Forms" tab of the toolboxRequiredfieldvalidatorDrag the control to the form and place it next to the "txtname" text box.
2. Select the verification control and set the following properties in the Properties window.

   Attribute	Set
   Controltovalidate	txtName This indicates that the validators will check the content of the Name field.
   Text	*(Asterisk) This is the text that will display at the current location of the validators control. (A red asterisk is usually placed next to an incorrect input box .)
   Errormessage	Email name is required. The text will be displayed in the summary on the page.

3. If you want to, you can set the font, color, and format attributes of the verification control. These attributes affect the display mode of errors.
4. Repeat Step 1 to Step 3 for the other three text boxes, and then create threeRequiredfieldvalidationControl.

   Widget	Set
   Requiredfieldvalidator2	Controltovalidate: SettxtBirthdate Text:* Errormessage:You must enter a birth date.
   Requiredfieldvalidator3	Controltovalidate: SettxtPassword Text:* Errormessage:You must enter a password.
   Requiredfieldvalidator4	Controltovalidate: SettxtPasswordAgain Text:* Errormessage:Re-enter the password to confirm it.

Check name format

For this walkthrough, assume that you should enter an email address as the registration name. Although you cannot check whether the name represents a valid email account, you can check whether the name complies with the typical email address format (for exampleName@domain.com). This will capture users' frequent input errors, such as forgetting to enter the ". com" section of the email address.

To check such patterns, use a verification program control that integrates regular expressions. If you understand the regular expression syntax, you can create your own regular expression. However, you can also select from a set of predefined regular expressions, including those that check the email address, phone number, and zip code.

After this verification control is added, the name box has two controls. The content in the box must pass two checks to be considered valid. When a single control has multiple validators, you usually want them to display their text (usually an asterisk) in roughly the same position, regardless of which verification check fails. You can specify this by setting the display attribute of the validators control. For more information, see ASP. NET Server Control validation error message layout.

Check name format

1. From the "Web Forms" tab of the toolboxRegularexpressionvalidatorDrag the control to the "txtname" box.
2. Select the verification control and set the following properties in the Properties window.

   Attribute	Set
   Controltovalidate	TxtName
   Text	*(Asterisk)
   Errormessage	Name must be in the format name@domain.xxx.
   Validationexpression	Select "Internet email address" from the list ". Note that this will set the attribute value to a regular expression.

Check Date Format

Make sure that you have entered a valid date for the date of birth field. You can perform this operation by executing a verification control with two features at the same time: It checks whether the user has entered a date and compares whether the date is later than the specified minimum date.

Check Date Format

1. From the "Web Forms" tab of the toolboxComparevalidatorDrag the control to the "txtbirthdate" box.
2. Select the verification control and set the following properties in the Properties window.

   Attribute	Set
   Controltovalidate	TxtBirthdate
   Text	*(Asterisk)
   Errormessage	Birth date is not a valid date.
   Valuetocompare	1900/01/01 (Or any other minimum date .) Note:Enter the date to be compared in the format of yyyy/mm/DD. This ensures that all the regional settings are correctly interpreted. When you enter a date, you must use only numbers for the month.
   Operator	Greater Than
   Type	Date
   Display	Dynamic

Check whether the Password Matches

As you often do, your registration form requires the user to type their password twice to confirm that this is the password they want to enter. You can use the verification control (comparison Control) that is the same as the check date to check this, but it is not based on a specific value here, compare the value of a field (the second password box) based on the content entered in the first Password box.

Security descriptionUseTextboxControls help ensure that others are not sure about the password when they enter it. However, the entered password text is not encrypted in any way and you should protect it like protecting any other confidential data. For example, to maximize security, you can use Secure Sockets Layer (SSL) and encryption when sending a form with a password. For more information, see Web Application Security at runtime.

Check whether the Password Matches

1. From the "Web Forms" tab of the toolboxComparevalidatorDrag the control to the side of the txtpasswordagain box.
2. Select the verification control and set the following properties in the Properties window.

   Attribute	Set
   Controltovalidate	TxtPasswordAgain
   Text	*(Asterisk)
   Errormessage	The passwords do not match.
   Controltocompare	TxtPassword
   Operator	Equal
   Display	Dynamic

Show verification error

One step left. You have configured the verification controls. They will display a red asterisk next to the input box that contains the error. However, this may not give the user enough information. For example, they may realize that they have entered the wrong registration name, but cannot identify the specific error.

To display details about verification errors, you can use the summary control. This control displays any verification controls that detect errorsErrormessageAttribute Value. If there is more than one error, the summary control can display all of them, in the form of a project entry in a simple list or text segment.

Show verification error

1. From the "Web Forms" tab of the toolboxValidationsummaryDrag the widget to the form. Place the control at a certain position where the control has space to display several lines of text.
2. If you want to display an error in a format other than a projectDisplaymodeSelect other display options for properties.
3. SetFontAndForecolorAttribute to set the format of the error message text.
4. The operation to add the verification control is completed. Now you can test their running status.

Test and verification

Test the web forms page with different values to view the effect of the verification control.

Test and verify controls

1. In Solution Explorer, right-click your form name and select View in browser ".
2. When the page is displayed, enter different values in the input box. To check the date of birth, enter an invalid date for the region of the Web server.

   An asterisk should be displayed next to the box containing the error for each input error.

3. Click Register ".

   If any error occurs, the error message text is displayed in the abstract control. (As you operate on fields, the red asterisks will appear and disappear at any time .)

   Note:The required fields are checked for the first time only when you submit a form. Therefore, you are not forced to enter data in the form in a specific order. However, after the form is submitted for the first time, an error is reported after the field is entered.

If you do not see the expected error, check the settings of each verification control and try again.

Subsequent steps

The verification added to the web form page in this walkthrough explains the basic concepts of the Web verification control. You can use more functions of the verification control, including their basic functions and functions implemented using code. You can expand this exercise in the following ways:

• Add anotherComparevalidatorControl, set its operatorLessthanSet the comparison value to today and check whether the user has entered a date earlier than today. You can use a data binding expression to set this value. Although you have not bound the validators control to data, you have taken advantage of the fact that the data binding expression is calculated before the control is rendered. The ASP. NET syntax of the control is as follows:

  <asp:CompareValidator id=c1    ValueToCompare='<%# DateTime.Today.ToShortDateString() %>'    ControlToValidate="txtBirthDate" Operator="LessThan" Type="Date" Text="*" runat="server" />

  Note:You must callDatabindMethod to parse the expression.

• Check the password length to make sure it meets a minimum number of characters. You can useRegularexpressionvalidatorControl to complete this operation. There is no predefined expression to check whether it meets the minimum number of characters. You can use the following expression, which requires five or more characters:

  ^[\w]{5,}

• Test and verify the code. Each verification control has a flag that can be tested programmatically. This complements the visual feedback provided by the control; by testing valid input in code mode, you can determine how to continue (or not continue) in the application ). For more information, see Program-proven ASP. NET Server controls.
• Learn about security issues related to web forms. For more information, see Web Application Security threat overview.