JQuery Validate Form Validation plugin----Customizing a validation method

One, download the dependency package

NET disk Download: Https://yunpan.cn/cryvgGGAQ3DSW access password f224

Ii. Introduction of dependency packages

<script src= ". /.. /scripts/jquery-1.3.1.js "type=" Text/javascript "></script> <script src=" Lib/jquery.validate.js "type=" Text/javascript "></script>

Iii. adding error styles and success styles

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;}

Iv. Customizing a validation method

// Customizing a validation method     $.validator.addmethod (    // authentication method name    function(value, element, param) {// validation Rule        return value = = eval (param);    }     ,' Please enter the results of the mathematical formula calculation correctly '// Verify the prompt information    );

Five, call style display.

Errorelement: "em",                // used to create error message label        function(label) {            //  Verify successful execution of the callback function            //label pointing to the above error message label em            label.text ("")                //  Clears the error message                . addclass ("Success");    // Add the custom success class        }

Six, the detailed code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><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.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> <script type= "Text/javascript" >$ (document). Ready (function(){    //Customizing a validation method$.validator.addmethod ("Formula",//Verify method Name    function(value, element, param) {//validation rules        returnValue = =eval (param); },     ' Please enter the results of the mathematical formula correctly. '//Validation Prompt Information    ); $("#commentForm"). Validate ({rules: {username : {required:true, minlength:2}, Email: {Required:true, Email:true}, URL:"url", Comment:"Required", Valcode: {formula:"7+9"}}, messages: {username: {required:' Please enter your name ', minlength:' Please enter at least two characters '}, Email: {Required:' Please enter e-mail ', Email:' Please check the email format '}, URL:' Please check the format of the URL ', Comment:' Please enter your comment '}, Errorelement:"Em",//used to create error message labelsSuccessfunction(label) {//callback function for validation after successful execution            //Label pointing to the above error message label EMLabel.text ("")//Empty the error prompt message. addclass ("Success");//Add a custom success class        }      });  }); </script>  for= "Cusername" > Name </label> <em>*</em><input id= "cusername" name= "username" size= "/>" < /p> <p> <label for= "Cemail" > Email </label> <em>*</em><input id= "cemail" name= "email" size= "/>" </p> <p> <label for= "curl" > URL </label> <em> </em><input id= "curl" name= "url" size= "value="/> &LT;/P&G   T <p> <label for= "Ccomment" > Your comments </label> <em>*</em><textarea id= "ccomment" name= "comment" cols= "all" > </textarea> </p> <p> <label for= "Cvalcode" > Verification Code </label> <input id= "Cvalcode" name= "Valcode" size= "value=" "/>=7+9 </p> & Lt;p> <input class= "Submit" type= "Submit" value= "commit"/> </p> </fieldset> </form></body& Gt;
Seven, the effect is as follows:
Validation failure Effect:
Verify successful results:
JQuery Validate Form Validation plugin----Customizing a validation method