FaPasswordStrength 密码强度组件

实时显示密码强度指示，帮助用户创建更安全的密码。

基础用法

<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>

Props

属性	类型	默认值	说明
password	string	''	密码值

Slots

无

Events

无

强度规则

密码强度根据以下规则计算（满分 5 分）：

1. 长度至少 8 个字符
2. 包含大写字母
3. 包含小写字母
4. 包含数字
5. 包含特殊字符

示例

基础密码强度

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

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

注册表单

<script setup lang="ts">
const form = ref({
  password: '',
  confirmPassword: '',
})
</script>

<template>
  <form class="space-y-4">
    <div>
      <FaLabel label="密码">
        <FaInput v-model="form.password" type="password" placeholder="请输入密码" />
      </FaLabel>
      <FaPasswordStrength :password="form.password" class="mt-2" />
    </div>
    <FaInput 
      v-model="form.confirmPassword" 
      type="password" 
      placeholder="确认密码" 
    />
  </form>
</template>

密码修改

<script setup lang="ts">
const form = ref({
  oldPassword: '',
  newPassword: '',
})

function handleChangePassword() {
  // 修改密码逻辑
}
</script>

<template>
  <FaCard title="修改密码">
    <div class="space-y-4">
      <FaInput 
        v-model="form.oldPassword" 
        type="password" 
        placeholder="当前密码" 
      />
      <div>
        <FaInput 
          v-model="form.newPassword" 
          type="password" 
          placeholder="新密码" 
        />
        <FaPasswordStrength :password="form.newPassword" class="mt-2" />
      </div>
      <FaButton @click="handleChangePassword">确认修改</FaButton>
    </div>
  </FaCard>
</template>

带验证规则提示

<script setup lang="ts">
const { t } = useI18n()
const password = ref('')

const rules = computed(() => [
  { text: t('hasLength'), met: password.value.length >= 8 },
  { text: t('hasUppercase'), met: /[A-Z]/.test(password.value) },
  { text: t('hasLowercase'), met: /[a-z]/.test(password.value) },
  { text: t('hasNumber'), met: /\d/.test(password.value) },
  { text: t('hasSpecialChar'), met: /[^A-Z0-9]/i.test(password.value) },
])
</script>

<template>
  <div class="space-y-4">
    <FaInput v-model="password" type="password" placeholder="请输入密码" />
    <FaPasswordStrength :password="password" />
    
    <div class="text-sm space-y-1">
      <div 
        v-for="(rule, index) in rules" 
        :key="index"
        class="flex items-center gap-2"
        :class="rule.met ? 'text-green-600' : 'text-muted-foreground'"
      >
        <FaIcon :name="rule.met ? 'i-lucide:check-circle' : 'i-lucide:circle'" class="size-4" />
        {{ rule.text }}
      </div>
    </div>
  </div>
</template>

强度指示器样式

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

const strengthTips = [
  '非常弱',
  '弱',
  '一般',
  '强',
  '非常强',
]

const strength = computed(() => {
  let score = 0
  if (password.value.length >= 8) score++
  if (/[A-Z]/.test(password.value)) score++
  if (/[a-z]/.test(password.value)) score++
  if (/\d/.test(password.value)) score++
  if (/[^A-Z0-9]/i.test(password.value)) score++
  return score
})
</script>

<template>
  <div class="space-y-2">
    <FaInput v-model="password" type="password" placeholder="请输入密码" />
    <div class="flex items-center gap-2">
      <FaPasswordStrength :password="password" class="flex-1" />
      <span class="text-xs text-muted-foreground">
        {{ strengthTips[strength - 1] || '' }}
      </span>
    </div>
  </div>
</template>

注意事项

1. 实时反馈：密码强度会随输入实时更新
2. 颜色指示：
   • 红色：非常弱（0 分）
   • 橙色：弱（1-2 分）
   • 黄色：一般（3-4 分）
   • 绿色：强（5 分）
3. 提示工具：鼠标悬停问号图标查看详细建议
4. 国际化：组件内置多语言支持

典型使用场景

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