Detailed description of jquery plug-in bootstrapValidator data verification, and jqueryvalidator Verification

Detailed description of jquery plug-in bootstrapValidator data verification, and jqueryvalidator Verification

Because the project requires data verification, it seems that bootstrapValidator is not bad, so it is always ready for use and compatible.

Bootstrap: a powerful framework that can increase compatibility.

Need to referenceCss:

Bootstrap.min.css

BootstrapValidator.min.css

Js:

Jquery-1.10.2.min.js

Bootstrap. min. js

BootstrapValidator. min. js

(Download instance)

All of the above are required.

First, a simple example is provided. You can import the corresponding file and run it directly:

<! DOCTYPE html> 
This is the most basic. The example is copied to the local machine and the css and js files are imported (the username, password, and other key values in JS correspond to the name attribute values in the input tag ), run the command to verify the length of a non-empty file. No css style is required.
As follows:

Of course, the above are all rules written by the plug-in. What should I do if I want to add matching rules by myself?
Add a regexp: {} key-value pair to the key value corresponding to the input as follows (modified based on the js above)
Username: {/* key name and input name value correspond to */message: 'The username is not valid', validators: {notEmpty: {/* non-empty prompt */message: 'User name cannot be blank '}, regexp: {/* just add this key-value pair, including the regular expression, and the prompt */regexp:/^ [a-zA-Z0-9 _ \.] + $/, message: 'can only be numbers and letters _. '}, stringLength: {/* length prompt */min: 6, max: 30, message: 'username length must be between 6 and 30 '}/* the last one without a comma */}},
The effect is as follows:

So far, as long as you run and read the example, you can perform most of the verification, isn't it easy? You only need to write the corresponding key-Value Pair and write everything on your own. We will further use the following to register a user,
Requirements:
Real-time verification of the existence of the user name, the password cannot be the same as the user name, the two passwords need to be the same, after submission, You need to verify the return value

Html code (simply replace the form in the above example ):

<Form id = "defaultForm" role = "form" class = "form-signin" action = "registerAccount. do "method =" post "> 

Js Code (directly replace JS in the example ):

$ (Function () {/* File Load, execute a function */$ ('# ultform form '). bootstrapValidator ({message: 'This value is not valid', feedbackIcons: {/* input state style image */valid: 'glyphicon glyphicon-OK ', invalid: 'glyphicon glyphicon-delete', validating: 'glyphicon glyphicon-refresh '}, fields: {/* Verification: Rule */username: {// verification input item: verification rule message: 'The username is not valid', validators: {notEmpty: {// non-empty verification: message: 'user name cannot be blank '}, str IngLength: {min: 6, max: 30, message: 'username length must be between 6 and 30 '}, threshold: 6, // send ajax requests only after 6 characters or more, (If one character is entered in input, the plug-in will send it once to the server and set the limit. It will only start after six characters) remote: {// ajax verification. Server result: {"valid", true or false} sends the current input name value to the service to obtain a json data. For example, {"valid", true} url: 'exist2. do ', // verification Address message: 'user already exist', // The message delay: 2000 is displayed. // ajax requests are sent every time one character is entered. The server is under too much pressure, set ajax to be sent once every 2 seconds (one character is input by default and submitted once, the server is under too much pressure) type: 'post' // Request Method/** custom data submission, the default value is the current input value * data: function (validator) {return {password: $ ('[name = "passwordNameAttributeInYourForm"]'). val (), whatever: $ ('[name = "whateverNameAttributeInYourForm"]'). val () };} */}, regexp: {regexp:/^ [a-zA-Z0-9 _ \.] + $/, message: 'the user name is underlined by numbers and letters. composition '}}, password: {message: 'invalid password', validators: {notEmpty: {message: 'password cannot be blank '}, stringLength: {min: 6, max: 30, message: 'username length must be between 6 and 30 '}, identical: {// same field: 'Password ', // The input name value to be compared message: 'inconsistent two passwords '}, different: {// field: 'username ', // The input name value message to be compared: 'cannot be the same as the Username'}, 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 blank '}, stringLength: {min: 6, max: 30, message: 'user name length must be between 6 to 30'}, identical: {// same field: 'Password', message: 'inconsistent two passwords '}, different: {// field: 'username', message: 'cannot be the same as Username'}, regexp: {// Match Rule regexp:/^ [a-zA-Z0-9 _ \.] + $/, message: 'The username can only consist of alphabetical, number, dot and underscore '}}, email: {validators: {notEmpty: {message: 'email cannot be blank '}, emailAddress: {message:' Please enter the correct email address such as: 123@qq.com '}}, phone: {message: 'The phone is not valid', validators: {notEmpty: {message: 'phone number cannot be blank '}, stringLength: {min: 11, max: 11, message: 'Enter the 11-digit mobile phone number'}, regexp: {regexp:/^ 1 [3 | 5 | 8] {1} [0-9] {9} $ /, message: 'Enter the correct phone number '}}}, invite: {message: 'invitation code', validators: {notEmpty: {message: 'invitation Code cannot be blank '}, stringLength: {min: 8, max: 8, message: 'enter the correct length of the invitation code'}, regexp: {regexp:/^ [\ w] {8} $ /, message: 'Enter the correct invitation code (including numbers and letters )'}}},}}). on ('success. form. bv ', function (e) {// after clicking submit // Prevent form submission e. preventDefault (); // Get the form instance var $ form = certificate (e.tar get); // Get the BootstrapValidator instance var bv = $ form. data ('bootstrapvalidator'); // Use Ajax to submit form data submit to the action in the form tag, custom result $. post ($ form. attr ('action'), $ form. serialize (), function (result) {// do something ...});});});
:
 
Exception:
Uncaught RangeError: Maximum call stack size exceedede
No class = "form-group" added"
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.