Question

我在注册页面上添加了Bootstrap的密码“strength-meter”插件，它运行正常。但是，我想扩展这个并为每个相应的消息移动颜色（类似于成功，警告和危险警报颜色）。目前，我已经将CSS编辑为Red。我想弄清楚是否可以动态更改CSS元素？

以下是页面上的HTML部分，从正文正下方的容器div开始到容器div的末尾：

<div class="container">

<?php if (isset($successMessage)) { ?>
    <div class="alert alert-success text-center" role="alert"><strong>Success! </strong><?php echo $successMessage; ?> </div><?php } ?>
<?php if (isset($redirectMessage)) { ?>
    <div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="Redirecting" style="width:100%"><?php echo $redirectMessage; ?> </div></div><?php } ?>
<?php if (isset($failMessage)) { ?>
    <div class="alert alert-danger alert-dismissable fade in text-center" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Error: </strong> <?php echo $failMessage; ?>
    </div><?php } ?>
<div class="password-fail"></div>
<form id="registration-form" class="form-signin" method="POST">
    <h2 class="form-signin-heading">Register Account</h2>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">@</span>
        <input type="text" name="username" class="form-control" placeholder="Username" required>
    </div>
    <input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email Address" required autofocus>
    <div class="col-lg-16" id="tooltip-viewport"> <!--containing viewport for tooltip -->
    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required>
    </div>
    <input type="password" name="password2" id="verifyPassword" class="form-control" placeholder="Confirm" required>
    <div class="button-container">
        <button id="register-button" class="btn btn-lg btn-primary btn-block disabled" type="submit">Register</button>
        <div class="login-page-link-container">
            <a href="src/login.php" class="login-page-link">I'm already a member!</a>
        </div>
</form>
</div>

以下是我在forms.css文件中的样式：

/*
TOOLTIP FOR PASSWORD STRENGTH
*/
.tooltip {
font-size: 16px;
}
.tooltip-inner {
background-color: red;
color: white;
}

最后，这是我写的Javascript函数：

$(document).ready(function () {
    $('#inputPassword').strengthMeter('tooltip', { //#inputPassword is input id
        hierarchy: { //tooltip hierarchy

            '0': 'Your Password is Empty',
            '1': 'You\'re kidding right?',
            '10': 'Very Weak',
            '20': 'Kinda Weak',
            '30': 'Good',
            '40': 'Strong',
            '50': 'Very Strong'
        },
        tooltip: {
            viewport: '#tooltip-viewport'} //containing div for password input
    });
});

如果不可能，那我很好。我试图搜索我下载的插件，并通过Google和S.O.进行搜索。没有给我任何与我的代码设置有关的信息。

感谢您的帮助。

Answer 1

Bootstrap Strength Meter中没有内置选项或回调，因此如果不修改底层库是不可能的（具体而言，需要扩展tooltip.js才能添加此功能）

来源：http://davidstutz.github.io/bootstrap-strength-meter/

如何根据密码分数

1 个答案: