FaPasswordStrength 密码强度

实时显示密码强度指示，帮助用户创建更安全的密码。组件默认提供一组常见密码规则，也支持通过 rules 和 colorThresholds 完全自定义校验规则与强度颜色。

使用场景

• 用户注册密码设置
• 修改密码页面
• 重置密码表单
• 账号安全设置
• 密码强度要求提示

Props

属性	类型	默认值	说明
password	string	''	密码值
rules	{ label: string, rule: (value: string) => boolean }[]	默认密码强度规则	密码强度校验规则，命中规则数即为强度分数
colorThresholds	{ min: number, color: string }[]	默认强度色阶	强度颜色阈值，按 min 从高到低匹配

默认规则

const defaultRules = [
  { label: '长度至少为8个字符', rule: value => value.length >= 8 },
  { label: '包含大写字母', rule: value => /[A-Z]/.test(value) },
  { label: '包含小写字母', rule: value => /[a-z]/.test(value) },
  { label: '包含数字', rule: value => /\d/.test(value) },
  { label: '包含特殊字符', rule: value => /[^A-Z0-9]/i.test(value) },
]

默认颜色阈值

const defaultColorThresholds = [
  { min: 0, color: 'bg-red-500' },
  { min: 1, color: 'bg-orange-500' },
  { min: 3, color: 'bg-yellow-500' },
  { min: 5, color: 'bg-green-500' },
]

colorThresholds 会按照 min 从高到低匹配，例如当前命中 4 条规则时，会使用 min: 3 对应的颜色。

示例

基础用法

<script setup lang="ts">
const password = ref('')
</script>

<template>
  <div>
    <FaInput v-model="password" type="password" placeholder="请输入密码" />
    <FaPasswordStrength :password="password" class="mt-2" />
  </div>
</template>

自定义规则和强度颜色

<script setup lang="ts">
const password = ref('')

const rules = [
  { label: '长度至少为8个字符', rule: (value: string) => value.length >= 8 },
  { label: '包含大写字母', rule: (value: string) => /[A-Z]/.test(value) },
  { label: '包含数字', rule: (value: string) => /\d/.test(value) },
]

const colorThresholds = [
  { min: 0, color: 'bg-red-500' },
  { min: 1, color: 'bg-yellow-500' },
  { min: 3, color: 'bg-green-500' },
]
</script>

<template>
  <div class="space-y-2">
    <FaInput v-model="password" type="password" placeholder="请输入密码" />
    <FaPasswordStrength
      :password="password"
      :rules="rules"
      :color-thresholds="colorThresholds"
    />
  </div>
</template>

注意事项

1. 实时反馈：密码强度会随输入实时更新。
2. 规则数量：强度满分等于 rules.length，进度条宽度按命中规则数占比计算。
3. 颜色阈值：colorThresholds 使用命中规则数匹配，而不是百分比匹配。