带语义的密码强度计 UI

Question

请指教如何使用语义 UI 进度条实现密码强度计？

<div class="ui left icon input">
    <input type="password" class="form-control" name="password" id="password" placeholder="">
<i class="icon-lock teal icon"></i>
</div>
<div class="ui bottom attached progress">
    <div class="bar">
    </div>
</div>

Answer 1

Tutsplus 有一个很棒的教程，可以使用 JavaScript 计算密码强度，您可以找到 here.

本教程会给你一个满分 100 分的分数。使用这个分数来填充语义 UI 中的进度条，如下所示：

$('.progress').progress({
    percent: score
});

带语义的密码强度计 UI

Password strength meter with Semantic UI

passwords

progress

semantic-ui