Use BootStrapValidator to complete frontend input verification and bootstrap frontend Verification

Source: Internet
Author: User

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!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.