Use Bootstrapvalidator to complete front-end input verification _javascript tips

Bootstrapvalidator can be used to complete input validation based on the bootstrap-built front-end UI, because the plug-in is completely based on bootstrap and thus seamlessly blends with the UI. The following diagram directly above, to see the completion of the results:

How, but also more harmonious, of course, you can also modify the default style, so that its display way more beautiful.

Here's how he uses it:

1. Download Bootstrapvalidator

You can download it by clicking the bootstrapvalidator official download address.

2. After downloading the directory structure

When the download is complete, if the entire file is formatted, the directory structure is as follows:

The files that you can use directly in your project are placed in the Dist folder, and the instances you use are in the demo, and the Bootstrap and jquery files on which you rely are placed in the vendor folder. If the bootstrap version of your project is inconsistent with the version it uses, it is recommended that you use its bootstrap file, otherwise it may cause problems with the display (it has been bothering me for days, finally solved), and here's how to use it:

3. Usage

Nothing to say, directly on the code:

(1) Library references

<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>

Mainly refers to the bootstrap JS and CSS files, as well as Bootstrapvalidator JS and CSS files. The above is based on my project structure, and of course you can build your own directory according to your own ideas.

(2) HTML section

<div class= "Row" > <form action= "dologin" method= "post" id= "LoginForm" > <div class= "Form-group" > < Div class= "Input-group input-group-md" > <span class= "Input-group-addon" id= "Sizing-addon1" ><i class= " Glyphicon Glyphicon-user "aria-hidden= true" ></i></span> <input type= "text" class= "Form-control" Name= "username" placeholder= "username"/> </div> </div> <div class= "Form-group" > <div class= "input- Group INPUT-GROUP-MD "> <span class=" Input-group-addon "id=" Sizing-addon1 "><i class=" Glyphicon Glyphicon-lock "></i></span> <input type=" password "class=" Form-control "name=" pwd "placeholder=" Password "/> </div> </div> <div class=" "OK well-sm" style= "Text-align:center;" > <input type= "Radio" name= "kind" value= "tea" > Teacher <input type= "Radio" name= "Kind" value= "Stu" > Student < /div> <button type= "Submit" class= "btn btn-success btn-block" > Login </bUtton> </form> </div>
 

(3) jquery validation part of the code

$ (document). Ready (function () {
 //write your code here ...
 $ (' #loginform '). Bootstrapvalidator ({message
 : "Your input value is not valid",
 feedbackicons:{
 valid: ' Glyphicon Glyphicon-ok ',
  invalid: ' Glyphicon glyphicon-remove ',
  validating: ' Glyphicon Glyphicon-refresh '
 },
 fields:{
 username:{
 validators:{
 notempty:{message
 : ' User name cannot be empty '
 }},
 pwd:{
 validators:{
 notempty:{
 message: ' Please enter password '
 }}},};

All right, here we are, but there are some basic uses here, and there are other more powerful features, such as asynchronous authentication (and server-side communication validation), and a lot of tutorials on the web. Hope this article is helpful to you!

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

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.