JQuery Validation Validation

JQuery Validation
Catalogue 　　Introduction: Form validation Made easy.　　　　Validate a simple comment form with an inline rules, or a complex signup form with powerful remote checks. Make form validation simple.　　A simple comment can be verified with built-in validation, or a powerful remote to validate a complex registration form. Purpose: Form validation, customizable extensions : http://plugins.jquery.com/validation/Effect Display: Original effect: Refer to download inside demo custom extension effect: Simple use instructions: reference:

//Validate option ***********************************************************$ ("form"). Validate ({debug:true  //debug mode (form not submitted)rules:{Name:"Required",//custom rule, key:value form, key is the element to be validated, value can be a string or an objectemail:{//built-in authentication methodRequiredtrue,//Required FieldsRequired: "#aa: Checked"The value of the expression is true, the required fields are required:function() {} returned to true, required email:true,//Verify the E-mail formatMinlength:5,//Set Minimum LengthMaxlength:10,//Set Maximum lengthRANGELENGTH:[5,10],//set a length range [Min,max]Min:2,//Set minimum ValueMax:8,//set the maximum valuerange:[2,8]//set the range of valuesUrl:true,//Verifying URL formatsDatetrue,//Verify date format (similar to 30/30/2008 format, do not verify date accuracy only validates format)Dateiso:true,//Verify the date format of the ISO type for example: 2009-06-23Datede:true,//Verify the German-style date format (29.04.1994 or 1.1.2006)Numbertrue,//Validating decimal digits (including decimals)Digitstrue,//Validating integersCreditCardtrue,//Verify credit card numberAccept: ""//Please enter a string with a valid suffix (the suffix of the uploaded file)Equalto: "#id名"//Verify that the contents of the two input boxes are the samePhoneus:true   //Verify the American phone numberregex:/Regular Expression///validation rules for Addmethod extensions above}} messages:{Name:"Name cannot be empty",//Custom hint information key:value form key is the element to be validated, the value is a string or functionemail:{Required:"E-mail cannot be empty", Email:"E-mail address is not correct"//validate built-in validation has a default English hint here for re-customizing}} errorplacement:function(error,element) {element.parents ('. Form-group '). Children (". Help-block"). HTML (error);//Error display location element validation elements error hint} Submithandler:function(form) {//A function that is run after validation is added to the form-submitted function, or the form is not submitted$ (form). Ajaxsubmit (); //form.submit ();} success:"Class name"//The element to validate passes the validated action, followed by a string, that appends a CSS class to the output error elementIgnore: ". Ignore"//No validation of certain elementsOnSubmitfalse   //whether to commit when validation defaults: TrueOnfocusout:false //whether to validate default when getting focus: trueOnKeyUpfalse    //verify default when tapping the keyboard: TrueOnClickfalse    //whether to validate on mouse click (General validation Checkbox,radiobox) default: TrueFocusinvalid:false //when a form is submitted, a form that does not pass validation (the first one or an unauthenticated form that receives the focus before it is submitted) gets the focus default: TrueFocuscleanup:true  //When the element that is not validated is focusable, and the error prompt is removed (avoid and focusinvalid.) Default: FalseErrorclass: "Class name"//Specify the CSS class name for the error prompt, and you can customize the style of the error prompt by default: "Error"Errorelement: "Tags"//What tags are used to mark errors by default: "Label"Wrapper: "Tags"//what label to use and wrap up the top errorelementErrorlabelcontainer: "Container id"//Put the error message in a single containerShowErrors:function(errormap,errorlist) {//with a function that shows the total number of elements that have failed to pass validation$ ("#summary"). HTML ("Your form contains" + This. Numberofinvalids () + "Errors,see details below.");  This. Defaultshowerrors (); }        })        //The Validate method returns a validator object, which has a number of methods that allow you to use the trigger checker or change the contents of a form **************$.validator.setdefaults ({//Set Validator DefaultDebugtrue,//set debug mode to default if there are multiple forms in a page this wayErrorclass: "Txt-impt",//set CSS class name for default error promptErrorelement: "Div"//set the label for the default error prompt        })        //Addmethod (name,method,message) Method: Name (key of the Custom rules) methods (custom validation method) message (Prompt for error output)JQuery.validator.addMethod ("Regex",function(value, element, params) {//Examples of extension methods:            varExp =NewREGEXP (params);//The value of the params rules passed in the regular expression            returnExp.test (value);//value that is validated by input passed in}, "Incorrect input format"); //Extended Rules ruleJQuery.validator.addClassRules ("name", {required:true, minlength:2        }); JQuery.validator.addClassRules ({name: {required:true, minlength:2}, Zip: {required:true, digits:true,            }        }); $("#myinput"). Rules ("Add"), {required:true, minlength:2, messages: {required:"Required Input", Minlength:jQuery.format ("Please, at least {0} characters is necessary")              }          }); $("#myinput"). Rules ("Remove");//Remove all validation rules$ ("#myinput"). Rules ("Remove", "Min Max")//Remove min Max        varform=$ (' form '); $(". Formbtn"). Click (function(){//button type Non-submit or submit button not in formConsole.log ("Valid:" + form.valid ())//form.valid () Verify successful return True            varValidator = $ ("form"). Validate (Setvalidate); varFormstate=validator.form ();//To determine the validation status returns a Boolean                //validator.element ("ID name") verifies that an element returns a Boolean                //Validator.resetform () restores the previously validated form to its original state before verification                /*validator.showerrors ({"FirstName": "I know that your FirstName is Pete, pete!" }); To display custom error messages*/            if(formstate==false){                return; }Else{                //Do someing ...            }            })        //using AJAX to authenticate, the default is to submit the current validated value to the remote address, if you need to commit additional values, you can use the data option background only allowed to return false and trueRemote: "check-email.php"remote: {URL:"Check-email.php",//Background Processing programType: "Post",//How data is sentDataType: "JSON",//Accept Data FormatData: {//the data to be passedUsernamefunction() {                      return$ ("#username"). Val (); }              }          }          //meta string mode ***************************************************************        //Introducing JS<script type= "Text/javascript" src= "js/jquery.metadata.js" ></script> <script type= "Text/javascript" Src= "Js/jquery.validate.js" ></script>//validation rule notation on Dom<input type= "text" name= "email" class= "{validate:{required:true,email:true}}"/>//set to Meta string validation method$ ("#myform"). Validate ({meta:"Validate", Submithandler:function() {alert ("submitted!")) }        })

Similar recommendation:

JQuery Validation Validation