<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
*{
font-family:verdana,font-size:96%;
}
Label{width:10em;float:left;}
label.error{
Float:none;
color:red;
Padding-left:. 5em;
Vertical-align:top;
}
P{clear:both;}
. submit{
Margin-left:12em;
}
em{
Font-weight:bold;
Padding-right:1em;
Vertical-align:top;
}
/**/
em {font-weight:bold; padding-right:1em; vertical-align:top;}
Em.error {
Background:url ("images/unchecked.gif") no-repeat 0px 0px;
padding-left:16px;
}
em.success {
Background:url ("images/checked.gif") no-repeat 0px 0px;
padding-left:16px;
}
</style>
<body>
<form method= "Get" action= "#" id= "Commentform" class= "Cmxform" >
<fieldset>
<legend> a simple validation with validation information Comment example </legend>
<p>
<label for= "Cusername" > Name </label><em>*</em>
<input type= "text" name= "username" size= "" id= "Cusername" >
</p>
<p>
<label for= "Cemail" > E-mail </label><em>*</em>
<input type= "text" name= "email" size= "id=" Cemail ">
</p>
<p>
<label for= "curl" > URL </label><em>*</em>
<input type= "text" name= "url" size= "id=" "Curl" >
</p>
<p>
<label for= "Ccomment" > Comments </label><em>*</em>
<textarea name= "comment" cols= "id=" ></textarea>
</p>
<p>
<label for= "Cvalcode" > Verification Code </label><em>*</em>
<input type= "text" name= "Valcode" size= "value=" "id=" Cvalcode "/>7+9
</p>
<p><input type= "Submit" Name= "value=" Submit "class=" ></p>
</fieldset>
</form>
<script type= "Text/javascript" src= ". /scripts/jquery-1.3.1.js "></script>
<script type= "Text/javascript" src= ". /scripts/lib/jquery.validate.js "></script>
<script type= "Text/javascript" src= ". /scripts/lib/jquery.validate.messages_cn.js "></script>
<script type= "Text/javascript" >
/*(1) $ ("#commentForm"). Add the Rules property to the Validate () method
(2) match validation rules with the Name property of each field
(3) Define validation rules: For example: Required:true,minlength:2
*/
$ (function () {
$ ("#commentForm"). Validate ({
Rules:{
username:{
Required:true,
Minlength:2
},
Email:{
Required:true,
Email:true
},
URL: "url",
Comment: "Required",
Valcode: {formula: "7+9"}//call validation Rule
},
messages:{
Username:{
Required: ' Please enter your name ',
MinLength: ' Please enter at least two characters '
},
Email:{
Required: ' Please input your email ',
Email: ' Please enter the correct email format '
},
URL:"Please enter the correct URL format",
Comment:"Please enter a comment"
},
Errorelement: "em",//Used to create error message labels
Success:function (label) {//Validation executed after successful callback function
//label pointing to the above error message label EM
Label.text (""). AddClass (' success ');//Empty the error message, plus the custom class
}
});
//Customize a validation method
$.validator.addmethod (
"Formula",//Verify method name
function (Value,element,param) {//Validation rules
return value = = eval (param);
},
' Please enter the correct mathematical formula to calculate the result '//Authentication prompt information
)
});
</script>
</body>
jquery Form Validation plugin--validation (Implementation behavior and structure separation)