In simple terms, the JQuery validation plug-in is to verify that the elements entered in form form satisfy the business rules, and if not, you can give the user a customized hint. The plug-in not only defaults to some validation rules, such as whether the checksum content is empty, the length of the content to meet the given value, can also be customized according to the user business rules, and error message, can also be customized according to user requirements of the display. It seems that the function of the plug-in is really strong, is not eager to use. OK, so let's start with a brief introduction on how to use it.
JQuery Validation Plugin download address: http://plugins.jquery.com/project/validate
To use this plugin, we want to use the method validate ({options}) on the form element;
Let's take a quick look at the options that the plugin will often use:
rules: Composed of Key/value, the key equals the table cell ID and value represents the business rules that the form element content needs to meet.
messages: Composed of Key/value, the key equals the table cell ID and value represents what the form element content does not satisfy a business rule.
Errorlabelcontainer: Specifies a container element that the page has defined to place an error message.
Errorcontainer: Represents a major content area within the Errorlabelcontainer.
wrapper: Means to define an element inside the Errorlabelcontainer element to wrap the error message.
onsubmit: Validation before form submission, can be set to false by adding additional events.
Highlight: Highlight input content area that is not valid.
Unhighlight: Restores the area that was previously highlighted.
--------------------------------------------------------------------------------
Now we start by using the jquery validation plug-in to simply implement the user Login page verification feature:
1. Introduction of Plug-ins:
Copy Code code as follows:
<script src= "Scripts/jquery-1.4.1-vsdoc.js" type= "Text/javascript" ></script>
<script src= "Scripts/jquery.validate.js" type= "text/javascript" add interface after ></script>
2. Add Style:
Copy Code code 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 Code code 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" >
Logged in 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. Scripting code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#form1"). Validate ({
Rules: {txtusername: "Required",
Txtpassword: {required:true, Minlength:8}
},
Messages: {txtusername: "Please enter your name",
Txtpassword: {required: "Please enter your password", minlength: "Password length must be greater than 8"}
},
Wrapper: "Li",//prompts the information by the list packing display
Errorlabelcontainer: $ ("#form1 div.alertmsg")//hint information into the specified element
});
$ ("#btnReset"). Click (function (e) {
E.preventdefault ();
$ ("#txtUserName"). Val ("");
$ ("#txtPassword"). Val ("");
});
});
</script>
5. User name and password do not input, direct submission, the display interface is as follows:
Now entered the username and password, password length input 4 bits, the display interface is as follows:
Well, by simply implementing the login user verification function, you should have a preliminary understanding of the plugin, and later chapters will delve into the plugin.
