ASP. NET jQuery instance 11 verifies the logon page by using the jQuery validation plug-in.

To put it simply, the jQuery validation plug-in is used to verify whether the content entered by elements in the form meets the business rules. If not, it can provide user-defined prompts. This plug-in not only has some verification rules by default, such as whether the verification content is empty, whether the content length conforms to the given value, but also can customize the business rules according to the user, and the error message, you can also customize the display according to your requirements. It seems that this plug-in is really powerful, and you can't wait to use it. Okay, let's start to explain how to use it.
JQuery validation Plugin: http://plugins.jquery.com/project/validate
To use this plug-in, we need to use the method validate ({options}) on the form element });
Let's quickly browse the options frequently used by the plug-in:
• Rules: It is composed of key/value. The key is equal to the form Element ID, and the value indicates the business rules to be satisfied with the form element content.
• Messages: It is composed of key/value. key is equal to the form Element ID, and value indicates the content to be displayed because the content of the form element does not meet certain business rules.
• ErrorLabelContainer: Specifies a container element that has been defined on the page for storing error information.
• ErrorContainer: represents a major content area in errorLabelContainer.
• Wrapper: defines an element in the errorLabelContainer element to encapsulate error messages.
• Onsubmit: perform verification before the form is submitted. If it can be set to false, it is verified by adding other events.
• Highlight: highlight areas where the input is invalid.
• Unhighlight: restores the previously highlighted area.
--------------------------------------------------------------------------------
Now we can use the jQuery validation plug-in to simply implement the user login page verification function:
1. Introduce the plug-in: 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>

2. Add a style:Copy codeThe Code is as follows: <style type = "text/css">
. Header
{
Background-color: # CCCCCC;
Color: White;
Font-weight: bolder;
Text-align: center;
}
. Content
{
Font-weight: bold;
Border: 1px solid # CCCCCC;
}
. Alertmsg
{
Color: Red;
}
. Alertmsg li
{
Margin-top: 3px;
Margin-bottom: 3px;
}
</Style>

3. interface code:Copy codeThe Code is as follows: <form id = "form1" runat = "server">
<Div align = "center">
<Table cellpadding = "3" cellspacing = "3" border = "0" class = "content">
<Tr>
<Td colspan = "2" class = "header">
Login User
</Td>
</Tr>
<Tr>
<Td align = "right">
<Asp: Label ID = "lblUserName" runat = "server" Text = "username:"> </asp: Label>
</Td>
<Td align = "left">
<Asp: TextBox ID = "txtUserName" runat = "server"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td align = "right">
<Asp: Label ID = "lblPassword" runat = "server" Text = "Password:"> </asp: Label>
</Td>
<Td align = "left">
<Asp: TextBox ID = "txtPassword" runat = "server" TextMode = "Password"> </asp: TextBox>
</Td>
</Tr>
<Tr>
<Td align = "center" colspan = "2">
<Asp: Button ID = "btnSubmit" runat = "server" Text = "Submit"/> <asp: Button ID = "btnReset"
Runat = "server" Text = "reset"/>
</Td>
</Tr>
</Table>
</Div>
<Div align = "center" class = "alertmsg">
</Div>
</Form>

4. script code:Copy codeThe Code is as follows: <script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Form1"). validate ({
Rules: {txtUserName: "required ",
TxtPassword: {required: true, minlength: 8}
},
Messages: {txtUserName: "enter your name ",
TxtPassword: {required: "enter your password", minlength: "The password length must be greater than 8 "}
},
Wrapper: "li", // The prompt information is displayed in the list.
ErrorLabelContainer: $ ("# form1 div. alertmsg") // enter the prompt information in the specified element.
});
$ ("# BtnReset"). click (function (e ){
E. preventDefault ();
$ ("# TxtUserName"). val ("");
$ ("# TxtPassword"). val ("");
});
});
</Script>

5. If you do not enter the user name and password, submit the file directly. The following page is displayed:

Now you have entered the user name and password, and the password length is 4 characters. The display page is as follows:

Well, you should have a preliminary understanding of the plug-in by simply implementing the login user verification function. The plug-in will be further learned in the following sections.