jquery Form Validation plugin: The Https://plugins.jquery.com/tag/validate/jQuery validation plugin is one of the most commonly used plugins: http://jqueryvalidation.org/
first, the basic APIThe "username" in the rules is "name" in input, not "id". Form verification, mainly two: one is the rule, and the second is the prompt information when using the Validate plug-in: When using the Validate () method when the debug set to True, then the form will not be submitted, only check, debugging more convenient The Validate () method is the core method in the Validate plug-in <br> Basic authentication method is required:true, required remote: "URL address" to go to the address remotely check minlength minimum length maxlength Maximum length rangelength length range min min max max range value range email email format URL URL format date date dateiso ISO date number digit digits integer Equalto with another Element value Equality configuration item remote verification-can be used to send data to the server for verification-can be a GET request that Remote:url can send the current information to the URL to obtain information-or a POST request is remote: {ur L:url,type:., data: The message to be sent} is to send the current information and the information in data to the URL
Ii. Basic API (2)Rangelength Length range: is in the form of an array. For example [the difference between 2,10]min and minlength: The length of the call is long, and no length represents its value, that is, the range of values to be noted. Settings: Email,url,date,dateiso:trueurl: Verify to add HTTP//or HTTPS://DATEISO:YYYY-MM-DD or YYYY/MM/DD format number:true Prompt input must be a number Digits:true prompt input must be a nonnegative integer equalto: "#password" password confirmation such as confirmation of the creation of a password Equalto: "selector" (password check) "#password"
third, advanced API Rules () method (only for elements in the form, not an entire form) 1. You can use the rules ("add", {}) method to add a rule to an element, such as $ ("#username"). Rules ("Add", {minlength : 2,maxlength:10}) 2. You can use the method of rules ("Remove", {}) to remove a rule for an element, such as $ ("#username"). Rules ("Remove", "email") You can use the valid method to implement a check of the form: $ ("#bt1"). Bind ("click", Function () {Alert ($ ("#demoForm"). Valid ()? " Fill in the correct ":" Fill in the Error ");}) The validator object method Validate method returns the validator object, and the validator object has many useful methods: Validator.form () verifies that the form is valid, returns true/ Falsevalidator.element (Element) verifies that an element is valid and returns True/falsevalidator.resetform () restores the form to its previous state validator.showerrors ( Errors) displays a specific error message for an element (which can be used in a custom check) Validator.numberofinvalids () returns the number of invalid elements (return 0 correctly) validator object static method, which can be used directly. Validator.addmethod (Name,method[,message]) add a custom validation method $.validator.format (Template,argument,argumentn ...) formatting strings, using parameters instead of {n}$.validator.setdefaults (options) in the template to modify the plug-in default settings $.validator.addclassrules (name,rules) The bulk increase validation type for the containing class property name validate () method configuration item Validate () method configuration item is the core content of the validate plug-in submithandler the function that runs after validation. You can add a form submission method invalidhandler a function that runs after an invalid form is submitted ignore do not validate some elements rules define a validation rule messages define a hint information grOups the validation of a set of elements, with an error hint, using Errorplacement control to put the error message on that instance call: Submithandler:function (from) {//form submission from:submit ();//$ ( form). Ajax.submit ();//$ajax Submit Form} invalidhandler:function (Event,validator) {//event: Invalid validation triggered event//validator: Object } You can also write an event to trigger $ ("Selector property value"). On ("event name", function (Event,validator)) { }); ignore: "#hh" does not validate class HH Each rules configuration method has a default depends:function (element) {condition}, which indicates that the configuration method is only started when the function satisfies the condition <br> the parameter param:x can be added to the method when the configuration method has parameters. When a function satisfies a condition in depends, the parameter is passed in to configure groups:{login: "Username password Confirm-password"}//To validate a set of elements errorplacement: function (error,element) {//after validation of a set of elements the error message displays Error.insertbefore ("#info");} The validate () method onsubmit whether the Onfocusout verifies whether the onclick is validated on a mouse click when the keyboard is being hit when it is committed and if it is validating when it is being submitted. Typically used when a checkbox or Radiofocusinvalid submits a form, a form that does not pass validation (the first or the unverified form that receives the focus before it is submitted) will have the focus Focuscleanup when the element that is not validated has the focus Whether to remove the error prompt Errorclass specifies the CSS class name for the error prompt, the default is error, you can customize the style of the bug prompt, and of course the class name can also be customized settings validclass specify the CSS class name for validation The same goes for errorelement use what tags mark errors (such as with <li> marks) wrapper use what label to wrap up the top errorelement (for example, <ul> package) ERRORLABELCOntainer the error information in a container (such as in a class or ID selector) Errorcontainer display or hide the authentication information, can be automatically implemented by the error message when the container properties are displayed, Hide without errors (typically used simultaneously with 3 above or 3 above) showerror can show how many unverified elements are in total showerrors:function (errormap,errorlist) { You can add custom error mode this.defaultshowerrors ();//system default error message Presentation}errormap,errorlist difference: List is more detailed than map, map can customize information directly, List can be used to parse error messages errorplacement where to put the custom error message success The element to validate passes the validated action (mainly for the label element) Highlight can add effects to elements that are not validated (primarily for form T elements) unhighlight eliminate the effects of unverified elements, both general and highlight use
Selector extension:
: Blank selects all elements with an empty value
: Filled select all elements for which values are not empty
: Unchecked selects all elements that are not selected
Iv. Custom Validation methods$.validator.addmethod (Name,.method[,message]) Name: Method name Method:function (value,element,params) method Logical message: Hint message this.optional (element) means to fill in the value of the validation, plus this is best set require, otherwise this validation will not be executed additional-methods.js contains a lot of extended validation methods. In writing the custom method can refer to this JS library all submitted form data, must be validated 2 times, before the submission of client authentication, after submission on the server side to verify again, to ensure the legitimacy of the data. The server side does not trust any data sent from the client.
jquery Plugin--validation plugin form validation
