Form validation--jquery Validate instructions for use

Source: Internet
Author: User
Tags button type

//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"If the value of the expression is true, the required fields Required:function () {} Return to true, the 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 Name"//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:var exp =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 Maxvar form=$ (' form '); $(". Formbtn"). Click (function () {//button type Non-submit or submit button not in formConsole.log ("Valid:" + form.valid ())//form.valid () Verify successful return Truevar validator = $ ("form"). Validate (Setvalidate); var formState=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 passedusername:function () {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!") }        })

Form validation--jquery Validate instructions for use

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.