Code note------jquery Validate usage instructions (GO)

Source: Internet
Author: User
Tags button type

Transferred from: http://asialee.iteye.com/blog/2001239

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 object
email:{
//built-in authentication method
Required:true,//required fields
Required: "#aa: Checked" expression with a value of true, is required
require D:function () {} returns True if required
Email:true,//verify e-mail format
Minlength:5,//Set Minimum length
Maxlength:10,//Set maximum length br> rangelength:[5,10],//set a length range [Min,max]
Min:2,//Set minimum
Max:8,//Set maximum value
range:[2,8]/ /set the range of values
Url:true,//Verify URL format
Date:true,//Verify date format (similar to 30/30/2008 format, do not verify date accuracy only to validate format)
Dateiso:true, Verify the date format of the ISO type for example: 2009-06-23
Datede:true,//Verify the German-style date format (29.04.1994 or 1.1.2006)
Number:true,//Validate decimal digits (       Include decimal)
Digits:true,//verify integer
Creditcard:true,//Verify credit card number
Accept: "//Enter a string with a valid suffix name (the suffix of the upload file)
    Equalto: "ID Name"//verify that the contents of the two input boxes are the same
Phoneus:true//Verify American phone numbers
regex:/regular expressions///validation rules for Addmethod extensions above
}
}

messages:{
Name: "Name cannot be empty",//Custom hint information key:value form key is the element to validate, the value is a string or function
email:{
Required: "e-mail cannot be empty",
Email: "E-mail address is incorrect"//validate built-in verification 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) {//The function that is to be run after validation is added with the form-submitted function, or the form will not be submitted
$ (form). Ajaxsubmit ();
Form.submit ();
}

Success: "Class name"//the element to be validated passes the validated action, followed by a string, which appends a CSS class to the output error element
Ignore: ". Ignore"//do not validate certain elements
Onsubmit:false//Whether the validation is default when committed: True
Onfocusout:false//Whether to verify default when getting focus: true
Onkeyup:false//Whether to verify the default when tapping the keyboard: true
Onclick:false//whether to validate on mouse click (General authentication Checkbox,radiobox) Default: True
Focusinvalid:false//After submitting a form, a form that does not pass validation (the first one or an unauthenticated form that receives the focus before submission) Gets the focus default: True
Focuscleanup:true//When the element that is not validated has the focus, and the error prompt is removed (avoid and focusinvalid.) Default: False
Errorclass: "Class name"//Specify the CSS class name for the error prompt, you can customize the style of the error prompt by default: "Error"
Errorelement: "Label"//Use what tag tag error default: "Label"
Wrapper: "Label"//Use what label and then wrap up the top errorelement
Errorlabelcontainer: "Container ID"//Put the error message in a single container
Showerrors:function (errormap,errorlist) {///with a function that shows the total number of failed validation elements
$ ("#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 Default
Debug:true,//Set debug mode to default if there is more than one form in a page this way
Errorclass: "Txt-impt",//Set CSS class name for default error prompt
Errorelement: "div"//Set default error Prompt label
})

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) {//extension Method Example:
var exp = new RegExp (params); The value of the params rules passed in the regular expression
return exp.test (value); Value that is validated by input passed in
}, "Incorrect input format");

//Extended Rules rules
JQuery.validator.addClassRules ("name", {
Required:true,
Minlength:2
});
JQuery.validator.addClassRules ({
Name: {
Required:true,
Minlength:2
},
Zip: {
Requir Ed:true,
Digits:true,
}
});
$ ("#myinput"). Rules ("Add", {
Required:true,
Minlength:2,
messages: {
Required: "Required I Nput ",
Minlength:jQuery.format (" at least {0} characters is necessary ")
}
});
$ ("#myinput"). Rules ("Remove");//Remove all validation rules
$ ("#myinput"). Rules ("Remove", "Min Max")//Remove min max

var form=$ (' form ');
$ (". Formbtn"). Click (function () {//button type non-submit or submit button not in form
Console.log ("Valid:" + form.valid ())//form.valid () Verify successful return True
var 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 was Pete, pete!"
}); 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 True
Remote: "check-email.php"
Remote: {
URL: "check-email.php",//Background handler
Type: "POST",//Data sending method
DataType: "JSON",//Accept data format
Data: {//To be passed
Username: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!")}
})

Code note------jquery Validate usage instructions (GO)

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.