Bootstrap Validator form submission initial experience based on html__html

Source: Internet
Author: User

Bootstrap Validator is the front-end framework for Twitter's form verification. various addresses

Download Address
https://github.com/nghuuphuoc/bootstrapvalidator
official API
http://bv.doc.javake.cn/

Import SSS

<link rel= "stylesheet"
     href= "${ctx}/static/common/bootstrapvalidator/dist/css/bootstrapvalidator.min.css ">

Import JS

<script type= "Text/javascript" src= "${ctx}/static/common/bootstrapvalidator/dist/js/bootstrapvalidator.min.js "></script>
    <script type=" Text/javascript "src=" ${ctx}/static/common/bootstrapvalidator/dist/js/ Language/zh_cn.js "></script>
Use

First, we introduce the form validation js

    $ (document). Ready (function () {
            $ ("#from"). Bootstrapvalidator ({message
                : ' This value isn't valid ',
                Feedbackicons: {/*input state style picture * *
                    valid: ' Glyphicon glyphicon-ok ',
                    invalid: ' Glyphicon glyphicon-remove ',
                    validating: ' Glyphicon Glyphicon-refresh '
                },
                submitbuttons: ' input[type= ' submit '] '/*bootstrap Validator will find the input tag type in form is submit, then bind the event
            /})
        ;

Bootstrap validator can be based on JS configuration, I did not research. We can go to the address below.

Http://www.cnblogs.com/v-weiwang/p/4834672.html
HTML-based configuration

The popular point is to write in the form of input, as shown below

NOT NULL to judge

Data-bv-notempty
data-bv-notempty-message= "Please enter your login account"

Judge Length

Data-bv-stringlength= "true"
data-bv-stringlength-min= "6" 
data-bv-stringlength-max=
" Data-bv-stringlength-message= "Your length is not correct"

determine if two input boxes have the same content

Data-bv-identical= "true"
data-bv-identical-field= "User.password"
data-bv-identical-message= "two times password input inconsistency"

Mailbox Verification

Data-bv-emailaddress
data-bv-emailaddress-message= "Please enter the correct email address"

Custom (based on regular expressions)

Data-bv-regexp= "true"
data-bv-regexp-regexp= '//regular content
data-bv-regexp-message= ""//Information

Other minor issues
* After the bootstrap validator Click Submit will be validated, if the validation does not pass the Submit button will become disabled state.
*bootstrap Validator validation rules are validated against the name of the field. If the name value is empty. The validation fails.

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: info-contact@alibabacloud.com 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.