20151221jquery Learning Notes--verifying plugins

Validation plug-in (validate.js) is a plug-in that validates the legitimacy of regular form data. Using it, the great solution
The complexity of the verification process on the form is placed, and the improvement of the error display also increases the user experience.
A Using the Validate.js plugin
Official website Download: http://bassistance.de/jquery-plugins/jquery-plugin-validation
The most important file is validate.js, and there are two optional auxiliary files: Additional-methods.js (Control class
mode) and message_zh.js (hint to Chinese) file (in practice, use min compressed version).
First step: Introduce Validate.js
<script type= "Text/javascript" src= "Js/jquery.validate.js" ></script>
Step two: Execute in JS file
$ (' #reg '). Validate ();
Two Default validation rules
The default validation rules for Validate.js are written in two forms: 1. Control property mode, 2.JS key-value pair-transfer method.

Use control mode to verify that "required and not less than two-bit" <input type= "text" class= "required" minlength= "2" name= "user" id= "user"/>

Note: The default rule is set to the Boolean value, directly written into the class can be implemented. If it is a number or array interval,
You can use the property = value directly. And for the error prompt is because, can introduce Chinese documents, or directly for
Replace it.

Use the JS object key value to set the $ (' #reg ') for the parameter method. Validate ({rules: {User: {///Only one rule, required:true,//Direct User: ' Required ', minlength:2, },},messages: {User: {required: ' account must not be empty! ', minlength: ' Account number must not be less than 2 bit! ‘,},}});

Note: The specified error message cannot be set because of the first form. We recommend using the second form, the second
form also avoids the HTML pollution.

All rules demonstrate $ (' #reg '). Validate ({rules: {email: {email:true,},url: {url:true,},date: {date:true,},dateios:} {Dateios : True,},number: {number:true,} digits: {digits:true,},creditcard: {creditcard:true,},min: {min:5,},range: {r} Ange: [5, 10],},rangelength: {rangelength: [5,10],},notpass: {equalto: ' #pass ',//To IS in uppercase T}},});

Three Methods and options for validate ()
In addition to the default validation rules, Validate.js provides a number of other properties and methods for developers to use. Than
For example, debug properties, error location, a series of more useful options.

Jquery.format formatted error prompt $ (' #reg '). Validate ({rules: {User: {required:true,minlength:5,rangelength: [5,10]},},message S: {User: {required: ' account must not be empty! ', Minlength:jQuery.format (' account must not be less than {0} bit! '), Rangelength:jQuery.format (' account is limited to {0}-{1} bit! '),},},});//Turn on debug mode to prohibit the submission of $ (' #reg '). Validate ({debug:true,});//Set debug mode to default, you can disable multiple form submission $.validator.setdefaults ({debug: True,});//use other means instead of the default commit submithandler:function (form) {//can perform Ajax commits, and without debug:true block commits},//ignore a field validation ignore: ' #pass ', Group Error groups: {myerror: ' User Pass ',},//Show group error focusinvalid:false,errorplacement:function (Error, Element) {$.ea CH (Error, function (index, value) {$ ('. Myerror '). HTML ($ ('. Myerror '). HTML () + $ (value)).},//Group error message, separate groups: {error_user: ' user ', Error_pass: ' Pass '},//assigns the group's error to the location errorplacement:function (error, Element) {error.appendto ('. Myerror ');},//set error prompt for class name Errorclass: ' Error_list ',//Set Error prompt label Errorelement: ' P ',//Unified package Error prompt Errorlabelcontainer: ' Ol.error ', wrapper: ' Li ',//set to load after successful classsuccess: ' Success ',///Use the method to load the class and add the text success:function (label) {label.addclass (' success '). Text (' OK ');},//highlight the element with the error, Color-changing Highlight:function (element, Errorclass) {$ (Element). FadeOut (function () {$ (Element). FadeIn ()})},//highlight the element with the error Color-changing Highlight:function (element, Errorclass) {$ (Element). css (' border ', ' 1px solid red ');},//successful element remove error highlighting Unhighlight: function (element, Errorclass) {$ (Element). css (' border ', ' 1px solid #ccc ')},//get information when the form is submitted Invalidhandler:function ( Event, Validator) {var errors = Validator.numberofinvalids (), if (errors) {$ ('. Myerror '). HTML (' You have ' + errors + ' form elements filled out illegally!) }},//gets the error prompt handle without committing a timely fetch value showerrors:function (Errormap, errorlist) {var errors = This.numberofinvalids (); if (errors) {$ ('. Myerror '). HTML (' You have ' + errors + ' form elements filled out illegally!) ‘);} else {$ ('. Myerror '). Hide ();} This.defaultshowerrors (); Execute default error},//get error prompt handle, errorlistshowerrors:function (Errormap, errorlist) {alert (errorlist[0].message); Get the error message alert (errorlist[0].element); The currently wrong form element},

Four Validate.js Other Features
With Remote:url, you can perform AJAX validation on the form by submitting the currently validated value to the remote address by default. Such as
You need to submit additional values, you can use the data option.

Use AJAX to verify rules: {User: {required:true,minlength:2,remote: ' user.php ',},},//user.php content <?phpif ($_get[' user ') = = ' Bnbbs ') {echo ' false ';} else {echo ' true ';}? >

Note: The remote address can only output ' true ' or ' false ' and cannot output other values.

Pass multiple values simultaneously to the remote port pass: {required:true,minlength:6,remote: {url: ' user.php ', type: ' POST ', DataType: ' JSON ', data: {User : function () {return $ (' #user '). Val ();},},},},//user.php content <?phpif ($_post[' user ']! = ' Bnbbs ' | | $_post[' PASS ']! = ' 12 3456 ') {echo ' false ';} else {echo ' true ';}? >

Validate.js provides some default values for event firings, and most of the recommendations are not changed.

Cancel commit validation Onsubmit:false,//default is True Note: setting to false causes direct legacy commits, does not implement validation, and is typically used for Keyup/click/blur validation submissions. Set the mouse to leave does not trigger the verification onfocusout:false,//default is true//set keyboard press bounce does not trigger verification onkeyup:false,//default is True Note: As long as set, in the test browser whether false or true do not touch Sent out. Set Click CheckBox and Radio Click Do not trigger verification onclick:false,//default is true//set error prompt, cannot get focus focusinvalid:false,//default is true//prompt error, hide error prompt, do not Can be used with focusinvalid, conflict focuscleanup:true,//default = False

Validate.js provides a rules method that can independently validate each form element, not only providing add validation,
The Remove removal verification feature is also available.

Add a form to user to verify $ (' #user '). Rules (' Add ', {required:true,minlength:2,messages: {required: ' account number must not be empty! ', Minlength:jQuery.format (' account must not be less than {0} bit! '),});//delete all validation rules for user $ (' #user '). Rules (' Remove ');//delete the specified validation rule for user $ (' #user '). Rules (' Remove ', ' minlength min Max '); /Add custom validation $.validator.addmethod (' Code ', function (value, Element) {var Tel =/^[0-9]{6}$/;return this.optional (element) | | (Tel.test (value));}, ' Please fill in your zip code correctly ');//Invoke custom validation rules: {code: {required:true,code:true,}},

　　

20151221jquery Learning Notes--verifying plugins