跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

密码强度

通过分段计量器或进度条提供密码强度的视觉反馈，并在用户输入时更新。

层级：forms
查看原文
本页目录

概览

强度计通过实时反馈密码复杂性，帮助用户创建安全的密码。Bootstrap 的强度组件提供：

  • 分段计量：根据强度等级填充的四个分段
  • 进度条变体：随着强度增长的单条进度条
  • 文本反馈：每个强度等级的可选文本消息
  • 可自定义评分：配置最小长度和评分标准
  • 最少的 JavaScript：遵循 Bootstrap 模式的轻量级组件

示例

分段

默认的强度计使用四个分段，随着密码强度的增加逐渐填充。添加 data-bs-strength 以启用 JavaScript 行为。

HTML
<div>
  <label for="password1" class="form-label">Password</label>
  <input type="password" class="form-control" id="password1" placeholder="Enter password">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>

带文字反馈

添加一个 .strength-text 元素以显示强度信息。

HTML
<div>
  <label for="password2" class="form-label">Password</label>
  <input type="password" class="form-control" id="password2" placeholder="Enter password">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
  <span class="strength-text"></span>
</div>

进度条

使用 .strength-bar 来表示一个随密码强度增长的单一进度条。

HTML
<div>
  <label for="password3" class="form-label">Password</label>
  <input type="password" class="form-control" id="password3" placeholder="Enter password">
  <div class="strength-bar" data-bs-strength></div>
</div>

静态分段

你可以通过手动设置 data-bs-strength 属性，在不使用 JavaScript 的情况下使用该组件进行静态显示。

弱
公平
好
强壮
HTML
<div>
  <div>Weak</div>
  <div class="strength" data-bs-strength="weak">
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Fair</div>
  <div class="strength" data-bs-strength="fair">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Good</div>
  <div class="strength" data-bs-strength="good">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Strong</div>
  <div class="strength" data-bs-strength="strong">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
  </div>
</div>

静态进度条

弱
公平
好
强壮
HTML
<div>
  <div>Weak</div>
  <div class="strength-bar" data-bs-strength="weak"></div>
</div>
<div>
  <div>Fair</div>
  <div class="strength-bar" data-bs-strength="fair"></div>
</div>
<div>
  <div>Good</div>
  <div class="strength-bar" data-bs-strength="good"></div>
</div>
<div>
  <div>Strong</div>
  <div class="strength-bar" data-bs-strength="strong"></div>
</div>

强度标准

默认的评分算法根据以下内容评估密码：

标准点数
符合最短长度（8个字符）+1
超过最低要求的4个以上字符+1
包含小写字母+1
包含大写字母+1
包含数字+1
包含特殊字符+1
多个特殊字符+1
16个以上字符+1
级别分数
弱1-2
一般3-4
良好5-6
强7-8

用法

通过数据属性

添加 data-bs-strength 以自动初始化。该组件将会在同一父容器中寻找密码输入。

属性描述
data-bs-strength在元素上初始化强度指示器（通常为 .strength）。
data-bs-input当密码字段不是同一容器中的兄弟元素时的 CSS 选择器。
data-bs-min-length计算强度评分时使用的最小长度。
HTML
          <div>
  <input type="password" class="form-control">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>

通过 JavaScript

JavaScript
          const element = document.querySelector('.strength')
const strength = new bootstrap.Strength(element, {
  input: '#my-password-input',
  minLength: 10,
  messages: {
    weak: 'Too weak',
    fair: 'Could be better',
    good: 'Good password',
    strong: 'Excellent!'
  }
})

依赖项

如果你正在从源代码构建 Bootstrap 的 JS，则密码强度插件需要以下 JavaScript 文件：

文件描述
js/src/strength.ts主要强度组件
js/src/base-component.ts基础组件类
js/src/dom/data.ts元素数据存储
js/src/dom/event-handler.ts事件处理工具
js/src/dom/manipulator.ts数据属性操作
js/src/dom/selector-engine.tsDOM选择器工具
js/src/util/config.ts配置基类
js/src/util/index.ts核心实用功能

选项

名称类型默认描述
input字符串 | 元素null密码输入的选择器或元素。如果未提供，将查找 input[type="password"] 在父元素中。
minLengthnumber8第一个强度点的最小密码长度。
messagesobject{weak, fair, good, strong}为每个强度等级自定义消息。
weightsobject见下文每个评分标准的分值。设置为 0 禁用一个标准。
thresholdsarray[2, 4, 6]力量等级的分数界限： [weak, fair, good]. 高于最后一个值的分数是“强”的。
scorerfunctionnull自定义评分函数 (password) => number在提供时覆盖内置评分。

默认权重

JavaScript
          {
  minLength: 1,        // Meets minimum length
  extraLength: 1,      // 4+ characters over minimum
  lowercase: 1,        // Contains lowercase letters
  uppercase: 1,        // Contains uppercase letters
  numbers: 1,          // Contains numbers
  special: 1,          // Contains special characters
  multipleSpecial: 1,  // Multiple special characters
  longPassword: 1      // 16+ characters
}

自定义权重

JavaScript
          // Disable uppercase requirement, make special chars worth more
new bootstrap.Strength(element, {
  weights: {
    uppercase: 0,   // Don't require uppercase
    special: 2      // Special chars worth 2 points
  },
  thresholds: [3, 5, 7]  // Adjust thresholds for new max score
})

自定义评分器

JavaScript
          // Fully custom scoring logic
new bootstrap.Strength(element, {
  scorer: (password) => {
    let score = 0
    if (password.length >= 12) score += 4
    if (/[!@#$%]/.test(password)) score += 4
    return score
  },
  thresholds: [2, 4, 6]
})

方法

方法描述
getStrength()返回当前强度等级（'weak'、'fair'、'good'、'strong'或null）。
evaluate()手动触发密码评估。
dispose()销毁组件实例。
JavaScript
          const element = document.querySelector('.strength')
const strength = bootstrap.Strength.getOrCreateInstance(element)

// Get current strength
console.log(strength.getStrength()) // 'fair'

事件

事件描述
strengthChange.bs.strength当强度等级变化时触发。包括 strength 和 score 属性。
JavaScript
          const element = document.querySelector('.strength')

element.addEventListener('strengthChange.bs.strength', event => {
  console.log('Strength:', event.strength) // 'weak', 'fair', 'good', 'strong'
  console.log('Score:', event.score) // 0-8
})

仅使用 CSS

对于简单的情况或服务器渲染的内容，你可以在没有 JavaScript 的情况下使用该组件，只需手动设置 data-bs-strength 属性和 .active 类。

HTML
          <!-- Set via server-side logic -->
<div class="strength" data-bs-strength="good">
  <div class="strength-segment active"></div>
  <div class="strength-segment active"></div>
  <div class="strength-segment active"></div>
  <div class="strength-segment"></div>
</div>

无障碍访问

  • 强度计是装饰性的反馈，应与清晰的密码要求文本一起使用
  • 考虑使用aria-describedby将密码输入与要求文本关联
  • 屏幕阅读器用户可以通过文本反馈选项受益，该选项会公布强度变化

CSS

变量

密码强度在.strength上使用本地 CSS 变量进行实时自定义。CSS 变量的值是从每个组件独特的 Sass map生成，并应用于上述类。

scss/表单/_strength.scss
// stylelint-disable-next-line scss/dollar-variable-default
$strength-tokens: defaults(
  (
    --strength-height: .375rem,
    --strength-gap: .25rem,
    --strength-margin-top: .25rem,
    --strength-border-radius: var(--radius-pill),
    --strength-bg: var(--bg-2),
    --strength-color: var(--bg-2),
    --strength-weak-color: var(--danger-bg),
    --strength-fair-color: var(--warning-bg),
    --strength-good-color: var(--info-bg),
    --strength-strong-color: var(--success-bg),
  ),
  $strength-tokens
);

Sass 列表

我们使用 Sass 列表来定义强度等级，这样你可以通过覆盖默认列表轻松添加或修改等级。等级的顺序很重要，因为它将用于确定强度计的宽度。

scss/表单/_strength.scss
$strength-levels: weak, fair, good, strong;