Bill: Bootstrap form verification Artifact: Bootstrapvalidator

Foreword: To do the web development of us, form verification is again common but the demand. Friendly error hints can increase the user experience. Bo Master Search Bootstrap form verification, the results are mostly the theme of the article: Bootstrapvalidator. Let's see how it's used today.

First, source code and API address

Before you introduce it, give it the source code and the address of the API.

Bootstrapvalidator Source: Https://github.com/nghuuphuoc/bootstrapvalidator

Boostrapvalidator api:http://bv.doc.javake.cn/api/

Second, the code and the effect show 1, primary usage

See Bootstrapvalidator's description: A jQuery form Validator for Bootstrap 3. From the description we can see that it requires at least jquery, bootstrap support. We first introduce the required JS components

<script src= "~/scripts/jquery-1.10.2.js" ></script>    <script src= "~/content/bootstrap/js/ Bootstrap.min.js "></script>    <link href=" ~/content/bootstrap/css/bootstrap.min.css "rel=" Stylesheet "/>    <script src=" ~/content/bootstrapvalidator/js/bootstrapvalidator.min.js "></script >    <link href= "~/content/bootstrapvalidator/css/bootstrapvalidator.min.css" rel= "stylesheet"/>

We know that since it is a form validation, we must have a form on the cshtml page, and we know that the element in the form is evaluated by the name attribute, so the elements inside the form must have a property value of name.

<form>            <div class= "Form-group" >                <label>Username</label>                <input type= "text "Class=" Form-control "name=" username "/>            </div>            <div class=" Form-group ">                <label> Email address</label>                <input type= "text" class= "Form-control" name= "email"/>            </div>            <div class= "Form-group" >                <button type= "Submit" name= "Submit" class= "btn btn-primary" >submit</ button>            </div>        </form>

With the form element, it is our JS initialization.

    $ (function () {        $ (' form '). Bootstrapvalidator ({

Message: ' This value was not valid ',
            Feedbackicons: {
                Valid: ' Glyphicon glyphicon-ok ',
                Invalid: ' Glyphicon glyphicon-remove ',
                Validating: ' Glyphicon Glyphicon-refresh '
   },

            Fields: {                username: {                    message: ' User name validation failed ',                    validators: {                        notempty: {                            message: ' User name cannot be empty '                        }                    }                },                email: {                    validators: {                        notempty: {                            message: ' The mailbox address cannot be empty                        '                }}}            }        });    });

The content should be easy to read. Look at the effect:

Verification Pass but the submit button is grayed out and cannot be clicked

Validation passed, submit button recovery

See the effect first, the biggest advantage: easy to use, friendly interface. Let's take a look at overlapping validation.

2. Intermediate usage

We know the wording of the non-null verification above, and there must be other verification methods in addition. Don't worry, we'll take a slow look. The above code cshtml part does not move, JS part we modify slightly:

　　$ (function () {$ (' form '). Bootstrapvalidator ({message: ' This value was not valid ', feedback                Icons: {valid: ' Glyphicon glyphicon-ok ', invalid: ' Glyphicon glyphicon-remove ',                    Validating: ' Glyphicon glyphicon-refresh '}, Fields: {username: { Message: ' User name validation failed ', validators: {notempty: {Me                            Ssage: ' User name cannot be empty '}, Stringlength: {min:6,                        MAX:18, message: ' User name length must be between 6 and 18 bits '}, RegExp: {regexp:/^[a-za-z0-9_]+$/, Message: ' username can only contain uppercase , lowercase, numeric, and underscore '}}}, email: {val              Idators: {          Notempty: {message: ' Mailbox cannot be empty '}, Emaila            Ddress: {message: ' The email address is in the wrong format '}}}    }        }); });

With overlapping verification we look at the effect:

It can be seen from the above code that the Validators property corresponds to a JSON object that can contain multiple types of validation:

Notempty: Non-null verification;

Stringlength: string length verification;

RegExp: Regular expression validation;

EmailAddress: Email Address verification (none of us to write the regular mailbox) ~ ~)

In addition to that, in the documentation we see that there are 46 verification types, and we draw a few common ones to look at:

Base64:64 bit code verification;

Between: Verify that the input value must be within a range value, such as greater than 10 less than 100;

CreditCard: Identity card verification;

Date: validation of dates;

IP:IP address verification;

Numeric: numerical validation;

Phone: telephone number verification;

Uri:url verification;

More verification types see: http://bv.doc.javake.cn/validators/. Of course, there may be some minor problems with the validation of Chinese, and if you need it, you can test it with your own code.

One of the more common is the Submithandler property, which corresponds to the event method of the Submit button. Use the following:

$ (function () {$ (' form '). Bootstrapvalidator ({message: ' This value was not valid ', Feedbackic                ONS: {valid: ' Glyphicon glyphicon-ok ', invalid: ' Glyphicon glyphicon-remove ',                    Validating: ' Glyphicon glyphicon-refresh '}, Fields: {username: { Message: ' User name validation failed ', validators: {notempty: {mess                            Age: ' User name cannot be empty '}, Stringlength: {min:6,                        MAX:18, message: ' User name length must be between 6 and 18 bits '}, RegExp: {regexp:/^[a-za-z0-9_]+$/, Message: ' username can only contain uppercase, small Write, number and underline '}}}, email: {Valid                Ators: {        Notempty: {message: ' Mailbox cannot be empty '}, Emailadd            Ress: {message: ' The email address is in the wrong format '}}}            }, Submithandler:function (validator, form, Submitbutton) {alert ("submit");    }        }); });

Many examples of validation are presented in its demo. We simply look at its effect, as to the implementation of the Code, in fact, is very simple, interested can directly look at the API.

Color verification

tab Form Validation

Button validation

Reprint: http://www.cnblogs.com/landeanfen/p/5035608.html

Bill: Bootstrap form verification Artifact: bootstrapvalidator (EXT)