bootstrap validator表单提交初体验 基于HTML

bootstrap validator是twitter的表单验证前端框架。

各种地址

下载地址
https://github.com/nghuuphuoc/bootstrapvalidator
官方API
http://bv.doc.javake.cn/

导入sss

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

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

使用

首先引入表单验证js

    $(document).ready(function() {
            $("#from").bootstrapValidator({
                message : 'This value is not valid',
                feedbackIcons : {/*input状态样式图片*/
                    valid : 'glyphicon glyphicon-ok',
                    invalid : 'glyphicon glyphicon-remove',
                    validating : 'glyphicon glyphicon-refresh'
                },
                submitButtons : 'input[type="submit"]'/*bootstrap validator 会在form 寻找input标签 类型是submit的，然后绑定事件*/
            });
        });

bootstrap validator 可以基于js配置，本人没有研究。大家可以去下面这个地址

http://www.cnblogs.com/v-weiwang/p/4834672.html

基于HTML的配置

通俗一点讲就是在input的表单里写，如下图

不为空 判断

data-bv-notempty
data-bv-notempty-message="请输入您的登录账号"

判断长度

data-bv-stringLength="true"
data-bv-stringLength-min="6" 
data-bv-stringLength-max="16"
data-bv-stringLength-message="您的长度不正确"

判断两个输入框是否内容相同

data-bv-identical="true"
data-bv-identical-field="user.password"
data-bv-identical-message="两次密码输入不一致"

邮箱验证

data-bv-emailAddress
data-bv-emailAddress-message="请输入正确的邮箱地址"

自定义（基于正则表达式）

data-bv-regexp="true"
data-bv-regexp-regexp='' //正则内容
data-bv-regexp-message="" //信息

其他小问题
*在bootstrap validator 点击提交后会进行验证，如果验证不通过 submit按钮会变为禁用状态。
*bootstrap validator 验证规则是根据字段的name来验证。如果name值为空。则验证失败。