如何使用其他 CSS 框架进行引导验证答案

【问题标题】：How to do bootstrap validation with using other css frameworks如何使用其他 CSS 框架进行引导验证
【发布时间】：2016-11-11 07:50:58
【问题描述】：

朋友们开始参考http://formvalidation.io/examples/changing-success-error-colors/做引导验证

页面末尾有一个下载选项。当我点击下载时，他们告诉我使用基础、纯、语义和 ui 工具包之类的东西。

我想做他们已经做过的事 - 谁能解释一下怎么做？

这是我的小提琴https://jsfiddle.net/0s9xw5rx/2/

CSS：

.field-error .control-label,
.field-error .help-block,
.field-error .form-control-feedback {
    color: #ff0039;
}

.field-success .control-label,
.field-success .help-block,
.field-success .form-control-feedback {
    color: #2780e3;
}

HTML

<form id="loginForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

脚本

$(document).ready(function() {
    $('#loginForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        row: {
            valid: 'field-success',
            invalid: 'field-error'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});

【问题讨论】：

您好，很长时间没有您的回复。我们可以帮忙吗？

标签： twitter-bootstrap zurb-foundation formvalidation-plugin formvalidation.io

【解决方案1】：

您的问题过于开放和不清楚。 Formvalidtion.io 是一个为框架用户验证表单的库。这意味着如果我正在使用 Bootstrap/Foundation... 我可以使用框架的表单设计和行为 with 这个库。

请回答以下问题，以便我们为您提供帮助：

您在您的站点中使用框架吗？如果有，是哪一个？
您实现了表单吗？
您是否按照文档中的说明将库连接到站点？

【讨论】：