Overview: jquery. Validate. JS is a validation plug-in under jquery.
Official Website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Http://download.csdn.net/source/2423908 APIs
Practical Use:
1. Reference jquery basic package and valiedate plug-in package
<SCRIPT src = "../JS/jquery. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "../JS/jquery. Validate. js" type = "text/JavaScript"> </SCRIPT>
Note: references cannot be reversed here.
2. Edit the CSS prompt when a verification error occurs.
<Style type = "text/CSS">
# Frmmain label. Error
{
Color: red;
Margin-left: 10px;
Width: auto;
Display: inline;
}
Input. Error
{
Border: 1px dotted red;
}
</Style>
Note: this can be modified according to the specific implementation.
3. Define verification rules (when I use it in a project, I define a separate JS file, such as adding information --
Information_create.aspx and Information Modification -- The information_edit.aspx pages must be verified.
A js file-Information. js can be reused on both pages .), Information. js verification is as follows:
$. Validator. setdefaults ({
Submithandler: function (form ){
Form. Submit ();
}
});
$ (Document). Ready (function (){
$ ("# Frmmain"). Validate ({// here, frmmain is the ID of our <from> </form> label.
Rules :{
Txtname :{
Required: True
},
Txtauthor :{
Required: True
},
Txtsource :{
Required: True
},
Hidtype :{
Required: True
},
Ddlstate :{
Required: True
},
Ddlputtype :{
Required: True
}
},
Messages :{
Txtname :{
Required: "The title cannot be blank! "
},
Txtauthor :{
Required: "the author cannot be blank! "
},
Txtsource :{
Required: "The source cannot be blank! "
},
Hidtype :{
Required: "select the information owner! "
},
Ddlstate :{
Required: "Please select the information review status! "
},
Ddlputtype :{
Required: "Please select the information recommendation space! "
}
}
});
});
Note: here is just a small example of your practice. There are some verification rules. You can visit the official website or download jquery
Validate Chinese API for viewing and using.
Tip: I am using Asp.net during development. If I add a verification button to my page, two buttons will appear on the page, for example, Save button, return button. If we do not do the processing, both buttons will be verified when two buttons are clicked, so the return button cannot be returned. Cssclass = "cancel" can be added to the return button. In this way, we will not verify it when we click the return button.
For example:
<Asp: button id = "btnsave" runat = "server" text = "save" width = "85px"
Onclick = "btnsave_click"/>
<Asp: button id = "btnback" runat = "server" text = "return" width = "85px"
Cssclass = "cancel" onclick = "btnback_click"/>