bootstrapValidator.js验证在bootstrap4.0使用

最新推荐文章于 2021-01-14 16:16:37 发布

置顶 elvesfish

最新推荐文章于 2021-01-14 16:16:37 发布

阅读量6.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JAVA web开发文章标签： java bootstrap 前端

本文链接：https://blog.youkuaiyun.com/l2000h_ing/article/details/78517428

web开发同时被 2 个专栏收录

13 篇文章

订阅专栏

JAVA

12 篇文章

订阅专栏

本文介绍如何将 BootstrapValidator.js 适配到 Bootstrap 4.0，包括样式调整、字体文件添加及 JavaScript 集成等步骤，并展示了实际应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

项目中使用bootstrap做前端，需要用bootstrapValidator.js做验证插件。网上找了一遍，没有支持bootstrap4.0版本的验证插件，自己动手把bootstrapValidator.js的样式整理下。

版本号

Bootstrap v4.0.0-beta (https://getbootstrap.com)

jQuery v3.2.1

bootstrapValidator.js

源码下载地址

http://download.youkuaiyun.com/download/l2000h_ing/10116143

解决办法

1.bootstrap4.0没有bootstrapValidator样式，需要找bootstrap3.0-4.0之间的样式。先copy出来。

1.customValidator.css

2.添加fonts

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

3.代码展示

<form>
        <div class="row">
            <div class="col-md-6 form-label">
                <label class="form-control-static">名称</label>
                <div class="form-group">
                    <input id="inputName" name="inputName" placeholder="例如：myServiceName" type="text"
                           value="${(service.name)!""}" maxlength="50"
                           <#if (opt) == "edit">readonly="readonly"</#if>
                           class="ember-view ember-text-field form-control"
                           onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
                </div>
            </div>

       </div> 
       <div class="row" style="margin-bottom: 30px;margin-top: 10px">
        <div class="col-md-12 form-label">
            <button type="submit" class="btn btn-primary" style=" width: 120px;" id="buttonSubmit">
                <#if (opt) == "add">add<#else>edit</#if>
            </button>
            <button type="button" class="btn btn-light" style="margin-left: 30px; width: 120px;"
                    onclick="window.history.go(-1)">取消
            </button>
        </div>
    </div>

</form>

关键是form元素，class='form-group'样式添加，input 需要name='inputName' .这样验证样式就启作用了。

4.js添加

$(document).ready(function () {
        var opt = "${opt}";
        initCommon(opt);
    });

    /**
     * 初始化验证+业务请求
     * @param opt
     */
    function  initCommon(opt) {
        formValidator();
        var buttonSubmit = $('#buttonSubmit');
        buttonSubmit.click(function (e) {
            e.preventDefault();
            //check data
            var bootstrapValidator = $("form").data('bootstrapValidator');
            bootstrapValidator.validate();
            if(bootstrapValidator.isValid()){
                //表单可以提交
                buttonSubmit.attr('disabled', true);
                ajaxBizData(opt);
                buttonSubmit.attr('disabled', false);
            }else{
                //表单不可以提交
            }
        });
    }

function formValidator() {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputName: {
                    message: '名称验证失败',
                    validators: {
                        notEmpty: {
                            message: '名称不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();
        });
    }