Use BootStrapValidator to complete frontend input verification and bootstrap frontend Verification

Use BootStrapValidator to complete frontend input verification and bootstrap frontend Verification

BootStrapValidator can be used to complete input verification in the front-end UI built based on BootStrap. Because this plug-in is fully based on BootStrap, it can be perfectly integrated with the UI. Let's take a look at the results:

You can also modify the default style to make the display more beautiful.

His usage is as follows:

1. Download BootStrapValidator

   You can click BootStrapValidator to download it.

2. Downloaded directory structure

   After the download is complete, if all files are converted, the directory structure is as follows:

 

 

The files that can be directly used in the project are put in the dist folder, the instances used are put in the demo, and the BootStrap and Jquery files that it depends on are put in the Vendor folder. If the BootStrap version of your project is different from the version used by it, we recommend that you use its BootStrap file. Otherwise, it may cause problems with the display effect (which has plagued me for several days, finally), let's see how to use it:

3. Usage

There's nothing to say, just go to the Code:

(1) database reference

<link rel="stylesheet" href="../public/static/vendor/bootstrap/css/bootstrap.min.css"/><script src="../public/static/js/jquery.min.js"></script><script src="../public/static/vendor/bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet" href="../public/static/vendor/bootstrapvalidator/css/bootstrapValidator.min.css"/><script type="text/javascript" src="../public/static/vendor/bootstrapvalidator/js/bootstrapValidator.min.js"></script>

 

It mainly references the js and css files of BootStrap and the js and CSS files of BootStrapValidator. The above is referenced based on my project structure. Of course, you can create a directory based on your own ideas.

(2) HTML section

<Div class = "row"> <form action = "dologin" method = "post" id = "loginform"> <div class = "form-group"> <div class = "input-group-md"> <span class = "input-group-addon" id = "sizing-addon1"> <I class = "glyphicon-user" aria- hidden = "true"> </I> </span> <input type = "text" class = "form-control" name = "username" placeholder = "username"/> </div> <div class = "form-group"> <div class = "input-group-md"> <span class = "input- group-addon "id =" sizing-addon1 "> <I class =" glyphicon-lock "> </I> </span> <input type =" password "class =" form -control "name =" pwd "placeholder =" password "/> </div> <div class =" well-known-sm "style =" text-align: center; "> <input type =" radio "name =" kind "value =" tea "> instructor <input type =" radio "name =" kind "value =" stu "> Student </div> <button type = "submit" class = "btn-success btn-block"> logon </button> </form> </div>

(3) Jquery verifies some code

$ (Document ). ready (function () {// write your code here... $ ('# loginform '). bootstrapValidator ({message: "Your input value is invalid", feedbackIcons: {valid: 'glyphicon glyphicon-OK ', invalid: 'glyphicon glyphicon-delete', validating: 'glyphicon glyphicon-refresh'}, fields: {username: {validators: {notEmpty: {message: 'user name cannot be blank '}}, pwd: {validators: {notEmpty: {message: 'Enter the password '}}}},});});

Well, I have finished writing it here. Of course, this is only some basic usage. It also has other more powerful functions, such as Asynchronous verification (communication verification with the server). There are many online tutorials, I will not go into details here. I hope this article will help you!

 

TOP Search for the first release of the network, reprinted please indicate the source!