ASP. NET jQuery instance 12 verifies the user registration page by using the jQuery validation plug-in.

Page Style code:
Copy codeThe Code is as follows:
<Style type = "text/css">
. Header
{
Background-color: # CCCCCC;
Color: White;
Font-size: x-large;
}
. Content
{
Background-color: White;
Font-weight: lighter;
Font-size: small;
}
. Content td
{
Text-align: left;
}
. Mandatory
{
Color: Red;
}
. ErrorContainer
{
Display: none;
Margin-bottom: 20px;
}
. AlertMsg
{
Margin-left: 20px;
Color: #660000;
}
. Input-highlight
{
Background-color: # CCCCCC;
}
</Style>

Page Structure Code:
Copy codeThe Code is as follows:
<Form id = "form1" runat = "server">
<Div align = "center">
<Div align = "center" class = "errorContainer">
<Fieldset style = "width: 550px;">
<P align = "left" class = "alertMsg">
Here are some error registration prompts. Check whether your registration information is in the correct format as prompted:
</P>
</Fieldset>
</Div>
<Fieldset style = "width: 350px; height: 400px">
<Table cellpadding = "3" cellspacing = "3" border = "0" class = "content">
<Tr>
<Td colspan = "2" class = "header" style = "text-align: center;">
Registered User
</Td>
</Tr>
<Tr>
<Td>
Username <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtName" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Email <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtEmail" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Password <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtPassword" runat = "server" TextMode = "Password"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Confirm Password <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtConfirmPwd" runat = "server" TextMode = "Password"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Birthday <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtDOB" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Address 1 <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtAddress1" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Address 2
</Td>
<Td>
<Asp: TextBox ID = "txtAddress2" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Zip code <span class = "mandatory"> * </span>
</Td>
<Td>
<Asp: TextBox ID = "txtPostal" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td>
Website
</Td>
<Td>
<Asp: TextBox ID = "txtWebsite" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td colspan = "2">
<Asp: CheckBox ID = "chkTandC" runat = "server"/> I accept the relevant legal terms
</Td>
</Tr>
<Tr>
<Td colspan = "2" style = "text-align: center;">
<Asp: Button ID = "btnSubmit" Text = "Submit" runat = "server"/> <asp: Button ID = "btnReset"
Text = "reset" runat = "server"/>
</Td>
</Tr>
</Table>
</Fieldset>
</Div>
</Form>

Script code:

First introduce the script file:
Copy codeThe Code is as follows:
<Script src = "Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. validate. js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. form. js" type = "text/javascript"> </script>

Script Function Code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
// Set the default operation behavior here
$. Validator. setDefaults ({
Highlight: function (input ){
$ (Input). addClass ("input-highlight ");
},
Unhighlight: function (input ){
$ (Input). removeClass ("input-highlight ");
}
});

// Call the validate () function to start form verification.
$ ("# Form1"). validate ({
Rules: {txtName: "required ",
// Verify whether the email format is correct and set the email attribute to true.
TxtEmail: {required: true, email: true },
TxtPassword: {required: true, minlength: 8 },
// Here, the role of the role to attribute is to verify that the password must be the same as the previous password.
TxtConfirmPwd: {required: true, minlength: 8, failed to: "# txtPassword "},
// Verify that the date format is correct. Set the date attribute to true;
TxtDOB: {required: true, date: true },
// Set the maximum text length through the maxlength attribute
TxtAddress1: {required: true, maxlength: 200 },
TxtAddress2: {maxlength: 200 },
// Set the digits attribute to a number.
TxtPostal: {required: true, digits: true },
// Check whether the url attribute is entered as a valid url
TxtWebsite: {url: true },
ChkTandC: "required"
},
Messages: {txtName: "enter your name ",
TxtEmail: {required: "Enter your Email ",
Email: "enter a valid email Address"
},
TxtPassword: {required: "enter your password ",
Minlength: "The password length must be greater than 8"
},
TxtConfirmPwd: {required: "enter your password ",
Minlength: "The password length must be greater than 8 ",
Failed to: "Please ensure that the entered password is the same as the Confirmed password"
},
TxtDOB: {required: "Enter your birthday ",
Date: "The format of the birthday date you entered is incorrect"
},
TxtAddress1: {required: "Enter your address 1 ",
Maxlength: "The length of address 1 cannot exceed 200"
},
TxtAddress2: {maxlength: "The length of address 1 cannot exceed 200 "},
TxtPostal: {required: "Enter your zip code ",
Digits: "The number you entered must be a number"
},
TxtWebsite: {url: "enter a valid url "},
ChkTandC: {required: "Please accept the relevant legal terms "}
},
Wrapper: "li ",
ErrorContainer: $ ("div. errorContainer "),
ErrorLabelContainer: $ ("# form1 p. alertMsg ")
});

$ ("# BtnReset"). click (function (e ){
E. preventDefault ();
// The resetForm () function of the plug-in form is used here to restore the status of the first page loaded.
$ ("# Form1"). resetForm ();
});
});
</Script>

Note: style selector div. errorContainer and div. errorContainer has different meanings. The first option is to select all div elements with style class errorContainer, and the second option is to select all descendant elements with style class errorContainer In the div element.
Finally: