如何使用 Bootstrap 的验证状态？答案

【问题标题】：How do I use Bootstrap's validation states?如何使用 Bootstrap 的验证状态？
【发布时间】：2015-01-16 00:50:52
【问题描述】：

我有一个使用 Bootstrap 的登录表单。电子邮件和密码输入控件是默认的 Bootstrap 控件。但我想将密码框更改为 Bootstrap 的“输入错误”validation state。我知道我应该让它的父 div 包含 has-error 类，但我希望只有在密码不正确时才会发生这种情况（我只从 jQuery 发布响应中意识到）。那么如何使用验证状态来指示错误的密码呢？

这是我的代码：

<div id="pass" class="form-group">
            <label id="lbPass" style="display:none;"  for="pwd">Password</label>
            <input tabindex="2" type="password" class="form-control" name="pwd" id="pwd" placeholder="Password">
            <label style="visibility:hidden;" id="wc" class="control-label" for="pwd" style="margin: 3px 0 5px 0;">Wrong Credentials</label>
            <span class="help-block" style="font-size:12px; font padding:2px;"><a href="" >Forgot password?</a></span>
        </div>

编辑（已解决）：

@MattD 在 cmets 中指出我应该使用 jQuery 的 addClass() 将“has-error”类添加到密码 div。它解决了这个问题。

这是我用来更改类的代码：

.fail(function(){

        $('#pass').addClass('has-error');

        document.getElementById('wc').style.visibility = 'visible';
    })

【问题讨论】：

你是如何运行/处理你的验证的？
通过使用验证器，这里有一个：bootstrapvalidator.com阅读文档
@MattD 我将 $.post() 用于 .php 文件，如果凭据不正确，该文件将返回错误。我只用它来构建前端原型。因此，根据 $.post() 函数的响应，如果成功，我会使用 JS window.location.replace() 重定向到新页面。我知道这不是真正的验证，但就像我说的，它只是一个 UI 原型。
应该重新加载元素。 jsfiddle.net/bp6orakz
效果很好。谢谢@MattD！

标签： twitter-bootstrap validation

【解决方案1】：

应该像根据您提供的内容通过 jQuery 添加类一样简单。如果验证失败，请添加类。

jQUery：

$('.btn').click(function() {
    if ( 1 > 2 ) {
        //whatevs...
    } else {
        $('#pass').addClass('has-error');
    }
});

1 > 2位只是进入else条件。

FIDDLE

【讨论】：

为什么没有任何其他语句可以评估为假？我选择了我选择的。
为什么不减少防守...好吧，为什么不停在这里。