"go" Bootstrapvalidator Tutorial based on jquery,bootstrap data validation plugin

Bootstrap: a powerful framework to increase Compatibility.

Because the project needs data validation, see Bootstrapvalidator also good, on the start has been, perfect compatibility, words do not say Much.

Need to reference css:

Bootstrap.min.css

BootstrapValidator.min.css

Js:

Jquery-1.10.2.min.js

Bootstrap.min.js

BootstrapValidator.min.js

(download Instance)

All of these are necessary.

first, a simple example, just import the corresponding file can be run directly:

View Code

This is the most basic, the example is copied directly to the local, and import the required CSS and JS file (js in the Username,password key value name and the input tag in the name attribute value corresponding), Run can be non-empty, length verification, completely do not need tube CSS Style.

As follows:

Of course, These are the plug-in write good rules, if you want to add the matching rules to do it?

As long as a regexp:{} key value pair is added to the input corresponding key value (modified on the above JS Basis)

Username: {/* Key Name and input name value correspond to */                    message: ' The username is not valid ',                    validators: {                        notempty: {/* non-null prompt */                            message: ' user name cannot be empty '                        },                        regexp: {/* Just add this key-value pair, including regular expressions, and hints */                            regexp:/^[a-za-z0-9_\.] +$/,                            message: ' can only be numbers and letters _. '                        ,                        stringlength: {/* length hint */                            min:6,                            max:30,                            message: ' User name length must be between 6 and 30 '                        }/* last without a comma/                    }                },

The effect is as Follows:

So as long as the run and see the example, you can do most of the verification, is not very simple? Just write the corresponding key-value pairs, and then write Everything. Further use of the following, the User's registration,

Demand:

Real-time verification of the existence of the user name, password can not be the same as the user name, two passwords need to be the same, after submission needs to verify the return value

HTML code (directly replacing the form in the example above):

<form id= "defaultform" role= "form" class= "form-signin" action= "registeraccount.do" method= "post" >                    &LT;H2 class= "form-signin-heading" > Please enter registration information:
JS code (JS in the direct substitution example):
The $ (function () {/* * document is loaded, executing a function */$ (' #defaultForm '). bootstrapvalidator ({message: ' This value was not valid ', Feedbackicons: {/*input State style picture */valid: ' Glyphicon glyphicon-ok ', invalid: ' Glyphicon glyph Icon-remove ', validating: ' Glyphicon glyphicon-refresh '}, fields: {/* validation: rule */user                      Name: {//verify Input entry: validation Rule message: ' The username is not valid ', validators: {                     Notempty: {//non-null authentication: prompt message: ' user name cannot be null '}, Stringlength: {min:6, max:30, message: ' username must be between 6 and 30 ', threshold:6,//have more than 6 characters to send Ajax requests, (enter a character in input, the plug-in will be sent to the server once, set 6 characters or More) remote: {//ajax Authentication. Server result:{"valid", True or false} sends the current input name value to the service and obtains a JSON Data.      The example is Correct: {"valid", true}                     Url: ' exist2.do ',//verify address message: ' user already exists ',//prompt message delay                         : 2000,//each input character, The Ajax request, the server pressure is too large, set 2 seconds to send Ajax (default input a character, submit once, server pressure is too large) type: ' POST '//request mode                               /** Custom Commit data, Default commit current input value * data:function (validator) {                                   Return {password: $ (' [name= ' Passwordnameattributeinyourform "] '). val (),                               Whatever: $ (' [name= ' Whatevernameattributeinyourform '] '). val ()                            }; } */}, regexp: {regexp:/^[a-za -z0-9_\.]             +$/, message: ' user name is underlined by a digital letter and. '}}, password: {message: ' Invalid password ', validators: {notempty: {                         Message: ' password cannot be empty '}, stringlength: {                     min:6, max:30, message: ' user name length must be between 6 and 30 '}, Identical: {//same field: ' password ',//input name value m required for comparison Essage: ' Two passwords inconsistent '}, different: {//cannot be the same as user name Field: ' Userna                         Me ',//the input name value that needs to be compared message: ' cannot be the same as user name '}, regexp: { regexp:/^[a-za-z0-9_\.]                     +$/, message: ' The username can only consist of alphabetical, number, dot and underscore '                 }}, repassword: {message: ' Invalid password ',          Validators: {notempty: {message: ' user name cannot be empty '           }, stringlength: {min:6, max:30,                         Message: ' username length must be between 6 and 30 '}, identical: {//same Field: ' password ', message: ' two times password inconsistent '}, different: {                     cannot be the same as the user name Field: ' username ', message: ' cannot be the same as the user name '}, Regexp: {//match Rule regexp:/^[a-za-z0-9_\.]                     +$/, message: ' The username can only consist of alphabetical, number, dot and underscore ' }}, email: {validators: {note                         Mpty: {message: ' mail cannot be empty '}, emailaddress: {       Message: ' Please enter the correct email address such as: [email protected] '              }}, phone: {message: ' The phone is not valid ',                     Validators: {notempty: {message: ' mobile number cannot be empty '                         }, stringlength: {min:11, max:11, Message: ' Please enter a 11-digit mobile number '}, regexp: {regexp:/^1[3             |5|8]{1}[0-9]{9}$/, message: ' Please enter the correct mobile number '}},                         Invite: {message: ' invitation code ', validators: {notempty: { Message: ' The invitation code cannot be empty '}, stringlength: {min                     : 8, max:8, message: ' Please enter the correct length of the invitation code '},          regexp: {               regexp:/^[\w]{8}$/, message: ' Please enter the correct invitation code (containing the number Letter) '}          }},}). on (' success.form.bv ', function (e) {//click submit after//Prevent form submission         E.preventdefault ();         Get the form instance var $form = $ (e.target);         Get the Bootstrapvalidator instance var bv = $form. data (' bootstrapvalidator '); Use the Ajax to submit form data submitted to the form tag in the Action,result custom $.post ($form. attr (' action '), $form. serialize (), functi     On (result) {//do something ...}); });});
：
Abnormal:
uncaught rangeerror:maximum Call stack size Exceedede
No add class= "form-group"
"go" Bootstrapvalidator Tutorial based on jquery,bootstrap data validation plugin