Preview Updated 2026-05-10

Password strength

Password input + 4-segment strength bar + live requirements list + show/hide toggle.

Basic usage

Defaults to 4 rules (8+ chars / uppercase / digit / symbol). Override via requirements.

背景

8+ 位字符
1 个大写字母
1 个数字
1 个符号

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfPasswordStrength } from '@chufix-design/vue';
const pwd = ref('');
</script>
<template>
  <div style="max-width: 360px;">
    <CfPasswordStrength v-model="pwd" placeholder="试着输入复杂密码…" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfPasswordStrength } from '@chufix-design/vue';
const pwd = ref('');
</script>
<template>
  <div style="max-width: 360px;">
    <CfPasswordStrength v-model="pwd" placeholder="试着输入复杂密码…" />
  </div>
</template>

import { useState } from 'react';
import { CfPasswordStrength } from '@chufix-design/react';

export default function Demo() {
  const [pwd, setPwd] = useState('');
  return (
    <>
      <CfPasswordStrength value={pwd} onChange={setPwd} />
    </>
  );
}

import { useState } from 'react';
import { CfPasswordStrength } from '@chufix-design/react';

export default function Demo() {
  const [pwd, setPwd] = useState('');
  return (
    <>
      <CfPasswordStrength value={pwd} onChange={setPwd} />
    </>
  );
}

Custom rules

Pass requirements to replace the 4 default rules. Each entry is { label, test }.

背景

12+ 位字符
不包含空格
至少 1 个小写
至少 1 个大写
至少 1 个数字
至少 1 个特殊字符

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfPasswordStrength } from '@chufix-design/vue';
const pwd = ref('');
const requirements = [
  { label: '12+ 位字符', test: (v: string) => v.length >= 12 },
  { label: '不包含空格', test: (v: string) => !!v && !/\s/.test(v) },
  { label: '至少 1 个小写', test: (v: string) => /[a-z]/.test(v) },
  { label: '至少 1 个大写', test: (v: string) => /[A-Z]/.test(v) },
  { label: '至少 1 个数字', test: (v: string) => /\d/.test(v) },
  { label: '至少 1 个特殊字符', test: (v: string) => /[!@#$%^&*]/.test(v) },
];
</script>
<template>
  <div style="max-width: 360px;">
    <CfPasswordStrength v-model="pwd" :requirements="requirements" placeholder="自定义规则…" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfPasswordStrength } from '@chufix-design/vue';
const pwd = ref('');
const requirements = [
  { label: '12+ 位字符', test: (v) => v.length >= 12 },
  { label: '不包含空格', test: (v) => !!v && !/\s/.test(v) },
  { label: '至少 1 个小写', test: (v) => /[a-z]/.test(v) },
  { label: '至少 1 个大写', test: (v) => /[A-Z]/.test(v) },
  { label: '至少 1 个数字', test: (v) => /\d/.test(v) },
  { label: '至少 1 个特殊字符', test: (v) => /[!@#$%^&*]/.test(v) },
];
</script>
<template>
  <div style="max-width: 360px;">
    <CfPasswordStrength v-model="pwd" :requirements="requirements" placeholder="自定义规则…" />
  </div>
</template>

import { useState } from 'react';
import { CfPasswordStrength } from '@chufix-design/react';

export default function Demo() {
  const [pwd, setPwd] = useState('');
  const requirements = [
    { label: '12+ 位字符', test: (v: string) => v.length >= 12 },
    { label: '不包含空格', test: (v: string) => !!v && !/\s/.test(v) },
    { label: '至少 1 个小写', test: (v: string) => /[a-z]/.test(v) },
    { label: '至少 1 个大写', test: (v: string) => /[A-Z]/.test(v) },
    { label: '至少 1 个数字', test: (v: string) => /\d/.test(v) },
    { label: '至少 1 个特殊字符', test: (v: string) => /[!@#$%^&*]/.test(v) },
  ];
  return (
    <>
      <CfPasswordStrength value={pwd} onChange={setPwd} requirements={rules} />
    </>
  );
}

import { useState } from 'react';
import { CfPasswordStrength } from '@chufix-design/react';

export default function Demo() {
  const [pwd, setPwd] = useState('');
  const requirements = [
    { label: '12+ 位字符', test: (v) => v.length >= 12 },
    { label: '不包含空格', test: (v) => !!v && !/\s/.test(v) },
    { label: '至少 1 个小写', test: (v) => /[a-z]/.test(v) },
    { label: '至少 1 个大写', test: (v) => /[A-Z]/.test(v) },
    { label: '至少 1 个数字', test: (v) => /\d/.test(v) },
    { label: '至少 1 个特殊字符', test: (v) => /[!@#$%^&*]/.test(v) },
  ];
  return (
    <>
      <CfPasswordStrength value={pwd} onChange={setPwd} requirements={rules} />
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` / `v-model` (Vue), `value/onChange` (React)	`string`	`''`	Password value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`placeholder`	`string`	`'Enter password'`
`disabled`	`boolean`	`false`
`showToggle`	`boolean`	`true`	Show eye toggle for visibility
`requirements`	`PasswordRequirement[]`	`defaultPasswordRequirements`	`{ label, test }[]`