Bootstrapvalidator.js do form validation

There is such a scenario, we may have to do some validation when submitting form form, such as judgment is not empty, phone format verification, mailbox format verification, etc., handwriting is also available.

But today I introduce a bootstrap plugin to simplify development. Is bootstrapvalidator.js.

Directly on the handwriting code.

1. First Jquery,bootstrap and Bootstrapvalidator (address Https://github.com/nghuuphuoc/bootstrapvalidator)

2. Refer to jquery bootstrap bootstrapvalidator (CSS, JS files are required)

3. Code

<formAction= "/account/register"Method= "POST"ID= "Registerform">@Html. AntiForgeryToken ()<Divstyle= "margin:0 auto; width:400px;">        <Divclass= "Form-group">            <label>Email:</label>            <inputtype= "text"name= "Email"ID= "Txtemail"class= "Form-control" />        </Div>        <Divclass= "Form-group">            <label>User name:</label>            <inputtype= "text"name= "Username"ID= "Txtregisterusername"class= "Form-control" />        </Div>        <Divclass= "Form-group">            <label>Password</label>            <inputtype= "Password"name= "Password"ID= "Txtregisterpassword"class= "Form-control" />        </Div>        <Divclass= "Form-group">            <label>Password repeat:</label>            <inputtype= "Password"name= "Confirm"ID= "Txtconfirm"class= "Form-control" />        </Div>        <Buttontype= "Submit"ID= "Btnregister"class= "Btn btn-primary">Registered</Button>        <Buttontype= "Reset"class= "Btn Btn-default"ID= "Btnregister">Reset</Button>    </Div></form>

The focus is on the following:

$ (' #registerForm '). Bootstrapvalidator ({message:' This value has not been verified ', Feedbackicons: {valid:' Glyphicon Glyphicon-ok ', Invalid:' Glyphicon glyphicon-remove ', validating:' Glyphicon Glyphicon-refresh '}, Fields: {email: {validators: {notempty: { Message:' Email is required '}, EmailAddress: {message:' Mailbox format is correct '}}}, Username: {message:' User name not yet verified ', validators: {notempty: {message:' User name cannot be empty '}, Stringlength: {min:1, Max:16, message:' User name length between 1 and 16 bits '}}}, Password: {message:' Password not yet verified ', validators: {notempty: {message:' Password cannot be empty '}, Stringlength: {min:6, Max:16, message:' Password length is between 6 and 16 '}, different: {field:' Username ', message:' Password cannot be the same as user name '}}}, Confirm: {message:' Password duplication has not been verified ', validators: {notempty: {message:' Password repeat cannot be null '}, Stringlength: {min:6, Max:16, message:' Password length is between 6 and 16 '}, identical: {field:' Password ', message:' Two times password is different please re-enter '}}} ). On (' Success.form.bv ',function(e) {//Prevent form SubmissionE.preventdefault (); //Get the form instance        var$form =$ (e.target); //Get the Bootstrapvalidator instance        varBV = $form. Data (' Bootstrapvalidator '); //Use Ajax to submit form data$.post ("/account/register", $form. Serialize (),function(data) {Console.log (data)if(Data. Status = = "OK") {window.location.href= "/home/index"; }            Else if(Data. Status = = "Error") {alert (data.            Message); }            Else{alert ("Unknown Error");    }        }); });

Look at the effect:

Note the following:

The style of this input must be this way (especially Form-group)

Otherwise it will be an error.

  <Divclass= "Form-group">            <label>Email:</label>            <inputtype= "text"name= "Email"ID= "Txtemail"class= "Form-control" />        </Div>

Bootstrapvalidator.js do form validation