Bootstrapvalidator.js, the best use of bootstrap form verification plugin simple and practical method

Practical methods

1. Introduction

Introduction of Bootstrapvalidator.js and Bootstrapvalidator.css files on pages with jquery and bootstrap

2. Build HTML code according to Bootstrap's form component

In the form, if you want to add a validation rule to a field, by default it needs to be <div class=”form-group”></div> wrapped (the corresponding error prompt will be positioned according to the class value), and the inner <input class="form-control" /> label must have the name attribute value, which is the validation match field.

<form id= "LoginForm" >    <div class= "Form-group" > for        = "username" > Admin </label>        <input name= "username" type= "text" class= "Form-control" id= "username" placeholder= "Please enter user name" >    </div >    <div class= "Form-group" > for        = "password" > password </label>        <input name= " Password "type=" password "class=" Form-control "id=" password "placeholder=" Please enter password ">    </div>    < Button type= "reset" class= "BTN btn-default" > Reset </button>    <button type= "Submit" class= "btn Btn-primary "> Login </button></form>

3. Find the form initialization check plug-in method that needs to be verified

$ (' #loginForm '). Bootstrapvalidator ({/*various icons displayed based on the validation results*/feedbackicons: {valid:' Glyphicon Glyphicon-ok ', Invalid:' Glyphicon glyphicon-remove ', validating:' Glyphicon Glyphicon-refresh '        },        /*to verify the form element user name password*/        /*Checksum Status: not_validated verifying VALIDATING validation failed VALID verification failure INVALID*/        /*Check rule: It is necessary to configure*/        /*fields Field---> elements within a form*/fields:{/*specifies that the element to be validated is specified by the name data*/username:{/*configure more than one validation rule rule*/validators:{/*Configure the specific rules*/notempty:{/*Check for unsuccessful prompt information*/message:' Please enter your user name '                    },                    /*Custom Rules*/callback:{Message:' User name error '}}}, password:{validators:{ notempty:{message:' Please enter your password '}, stringlength:{min:6, Max:18, message:' Password 6-18 characters '                    },                    /*Custom Rules*/callback:{Message:' Password error '                    }                }            }        }        /*the commit is blocked by default when the checksum fails*/        /*when the validation is successfully submitted by default*/        /*to prevent default submissions from using AJAX submissions instead*/}). On (' Success.form.bv ',function(e) {/*Block Browser default behavior*/E.preventdefault (); var$form =$ (e.target); /*send a login request*/$.ajax ({type:' Post ', URL:'/employee/employeelogin ',            /*A string of data Key=value that can be passed the serialized data format Object [{name: ', value},...]*/data: $form. Serialize (), DataType:' JSON ', Success:function(data) {/*logic after a successful response*/                if(data.success) {location.href= '/admin/index.html '; }Else{                    if(Data.error = = 1000){                        /*Call the check plug-in to set this option to verify that the failed status prompt verifies the failure information*/                        /*updatestatus (' which element ', ' Modify why state ', ' Check rule ')*/$form. Data (' Bootstrapvalidator '). UpdateStatus (' username ', ' INVALID ', ' callback '))                    }Else if(Data.error = = 1001{$form. Data (' Bootstrapvalidator '). UpdateStatus (' password ', ' INVALID ', ' callback '))                    }                }            }        }); });

Bootstrapvalidator.js, the best use of bootstrap form verification plugin simple and practical method