jquery Plugin bootstrapvalidator data validation detailed _javascript tips

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

Bootstrap: A powerful framework to increase compatibility.

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 appropriate file can be run directly:

<! DOCTYPE html>  

This is the most basic, the example directly copied to the local, and the import needs of CSS and JS files (JS Username,password and input tags in the name of the value of the corresponding), the operation will be able to do non-null , length verification , CSS styles are not required at all.

The effect chart is as follows:

Of course, the above are plug-ins to write good rules, if you want to add a matching rule how to do?

As follows, add a regexp:{} key value pair in the corresponding key value of input (modified on the above JS basis)

Username: {/* Key name and input name value correspond to
   /message: ' The username is not valid ',
   validators: {
   notempty: {/* NOT NULL Prompt/*
    message: ' User name cannot be empty '
   },
   regexp: {/* Just add this key value pair, include regular expression, and hint/
    regexp:/^[a-za-z0-9_\.] +$/,
    message: ' Only numbers and letters _ '
   },
   stringlength: {/* length hint/
    min:6,
    max:30, Word
    : ' Username length must be between 6 and 30 '
   }/* last one without comma/
   }
  },

The effect is as follows:

So as long as the operation and look at the example, you can do most of the verification, is not very simple? Just write the corresponding key value pairs, and then you have written everything. The following further use, for the user's registration,

Demand:

Real-time authentication user name exists, password cannot be same as username, two times password need to be the same, after commit need to verify return value

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

<form id= "Defaultform" role= "form" class= "Form-signin" action= "registeraccount.do" method= "POST" > 
 

JS code (direct replacement of JS in the example):

$ (function () {/* document loading, executing a functions */$ (' #defaultForm '). Bootstrapvalidator ({message: ' This value isn't valid ', Feedbacki Cons: {/*input state style picture * * valid: ' Glyphicon glyphicon-ok ', invalid: ' Glyphicon glyphicon-remove ', validating: ' Glyphico
  
   N Glyphicon-refresh '}, Fields: {/* authentication: Rule/Username: {//Validate input: Validation rule message: ' The username is not valid ', Validators: {notempty: {//non-null authentication: Prompt message: ' username cannot be empty '}, Stringlength: {min:6, max:30, mess Age: ' username must be between 6 and 30 '}, Threshold:6,///has more than 6 characters to send Ajax request, (enter a character in input, the plugin will send to the server once, set the limit, 6 characters above to start) remote: {//aj AX validation. Server result:{"Valid", True or false} sends the current input name value to the service to obtain a JSON data. Example is correct: {"valid", true} URL: ' exist2.do ',//Verify Address message: ' User already exists ',//prompt messages delay:2000,//each character, send an AJAX request, server pressure or too Large, set 2 seconds to send an AJAX (default input one character, submit once, server pressure too Large) type: ' Post '//Request mode/** Custom submit data, default value submit current input value * data:function (valida Tor) {return {password: $ (' [name=] PasswordnameattributeinyourfORM "]). Val (), Whatever: $ (' [name= ' whatevernameattributeinyourform] '). Val ()}; } */}, RegExp: {regexp:/^[a-za-z0-9_\.] +$/, message: ' username is underlined by alphanumeric letters and. Composition '}}, Password: {message: ' Password not valid ', validators: {notempty: {Me
    Ssage: ' Password cannot be empty '}, Stringlength: {min:6, max:30, message: ' username length must be between 6 and 30 '}, identical: {//same Field: ' Password ',///need to compare input name value message: ' Two password inconsistent '}, different: {//cannot be the same field as Username: ' username ',/ /required to compare the input name value 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 : Message: ' username length must be between 6 and 30 '}, identical: {///same field: ' Password ', message: ' Two times password Inconsistent '}, Diffe Rent: {//cannot be the same field as username: ' username ', message: ' cannot be the same as user name '}, RegExp: {//matching rule regexp:/^[a-za-z0-9_\.]
   +$/, message: ' The username can only consist of alphabetical, number, dot and underscore '}}, email: {
   Validators: {notempty: {message: ' Mail cannot be empty '}, EmailAddress: {message: ' Please enter the correct mail address such as: 123@qq.com '}
   }, Phone: {message: ' The ' phone ' isn't valid ', validators: {notempty: {message: ' Mobile number cannot be empty '}, Stringlength: {min:11, max:11, message: ' Please enter 11-digit mobile number '}, RegExp: {regexp:/^1[3|5|8]{1}[0-9]{9}$/ , message: ' Please enter the correct phone number '}}}, invite: {text: ' Invitation code ', validators: {notempty: {: ' Invite Code cannot be empty '}, Stringlength: {min:8, max:8, message: ' Please enter the invitation code of the correct length '}, RegExp: {regexp:/^[\w]{8 }$/, message: ' Please enter the correct invitation code (contains the numeric letters) '}}}. On (' Success.form.bv ', function (e) {//click submit///Prevent FO

  RM submission E.preventdefault (); Get the Form Instance var $form = $ (e.target);

  Get the Bootstrapvalidator instance var bv = $form. Data (' Bootstrapvalidator '); Use Ajax to submit form data is submitted to the Action,result custom $.post ($form. attr (' action ') in the form label, $form. Serialize (), function (res
 Ult) {//do something ...});
});

 });

Effect Chart:

Abnormal:

uncaught rangeerror:maximum Call stack size Exceedede
no class= "Form-group."

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.