2025，是时候让cursor帮你做密码强度校验器

前言

在当今数字化时代，密码安全性至关重要。许多用户在创建密码时缺乏安全意识，使用简单的密码模式，这容易导致账户被破解。

因此，产品团队决定开发一个密码强度校验器，帮助用户创建更安全的密码。

产品：是有进度条，中间有间隔分开，然后根据密码强度进行回显，大概是这个样子

前端实习生：没有做过，需要调研一下（偷偷打开cursor，一顿输出），最终十分钟解决了，效率可谓是提升了百分之400%

让cursor进行一顿分析，讲清楚我们要的样式以及要求，经过几次修改，最终完美实现产品要的效果

这里是cursor按照他的理解输出的密码校验规则，可以满足大部分场景，如果你觉得不适合，也可以让cursor追加规则

包含小写字母 - 使用正则表达式/[a-z]/检测
包含大写字母 - 使用正则表达式/[A-Z]/检测
包含数字 - 使用正则表达式/\d/检测
包含特殊字符 - 使用正则表达式/[!@#$%^&*(),.?":{}|<>]/检测
密码长度至少8位 - 通过password.length >= 8检测

产品的设计要求，也一并给到cursor，最好是在项目的规则目录写好

视觉吸引: 炫酷的背景动画和现代化界面设计
交互流畅: 平滑的动画过渡和即时响应
响应式: 适配不同屏幕尺寸的设备
可访问性: 良好的对比度和清晰的视觉层次

在项目的根目录创建.cursorrules，如图所示，在这里添加规则可以让cursor更加智能

密码强度检测逻辑，动态计算分数

typescript 复制代码

// 五个检测维度
const hasLowerCase = computed(() => /[a-z]/.test(password.value))
const hasUpperCase = computed(() => /[A-Z]/.test(password.value))
const hasNumbers = computed(() => /\d/.test(password.value))
const hasSpecialChars = computed(() => /[!@#$%^&*(),.?":{}|<>]/.test(password.value))
const hasMinLength = computed(() => password.value.length >= 8)

// 强度等级计算
const checkPasswordStrength = () => {
  let score = 0
  if (hasLowerCase.value) score++
  if (hasUpperCase.value) score++
  if (hasNumbers.value) score++
  if (hasSpecialChars.value) score++
  if (hasMinLength.value) score++
  strengthLevel.value = score
}

进度条五等份实现

使用 CSS 伪类选择器创建分割线：

css 复制代码

.progress-segments::before,
.progress-segments::after {
  content: '';
  position: absolute;
  width: 2px;
  background: #fff;
  /* 20% 和 40% 位置的分割线 */
}

.segment:nth-child(1) { left: 60%; }
.segment:nth-child(2) { left: 80%; }

动态样式系统

css 复制代码

.strength-1 .progress-fill { width: 20%; color: #ef4444; }
.strength-2 .progress-fill { width: 40%; color: #f97316; }
.strength-3 .progress-fill { width: 60%; color: #eab308; }
.strength-4 .progress-fill { width: 80%; color: #22c55e; }
.strength-5 .progress-fill { width: 100%; color: #16a34a; }

渐变背景

css 复制代码

background: linear-gradient(45deg, #0f0f23, #1a1a2e, #16213e, #0f3460);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;

响应式优化

css 复制代码

@media (max-width: 768px) {
  .password-strength-container {
    width: 95vw;
    padding: 32px 24px;
  }
  
  h2 { font-size: 24px; }
  .strength-label { font-size: 16px; }
}

组件使用

vue 复制代码

<template>
  <PasswordStrengthMeter />
</template>

<script setup>
import PasswordStrengthMeter from './components/PasswordStrengthMeter.vue'
</script>

密码强度等级

等级	描述	颜色	条件
0	很弱	红色 (#ef4444)	无输入
1	弱	红色 (#ef4444)	满足1个条件
2	一般	橙色 (#f97316)	满足2个条件
3	强	黄色 (#eab308)	满足3个条件
4	强	绿色 (#22c55e)	满足4个条件
5	很强	深绿 (#16a34a)	满足所有条件

颜色要根据强度变化

自定义配置

可以通过修改 PasswordStrengthMeter.vue 组件来自定义：

校验规则: 修改正则表达式
颜色主题: 调整 CSS 变量
动画效果: 修改 transition 和 animation 属性
响应式断点: 调整媒体查询条件

测试与部署

在开发完成后，进行了全面的测试，确保组件在各种设备和浏览器上都能正常工作。随后，使用 Vite 构建了生产版本，并使用nginx进行了部署，最终的效果，产品也是相当满意（cursor真的太强了，ai coding效率杠杠的）。

bash 复制代码

npm run build

当然你也可以让cursor帮你再进行分析，是不是还可以再改进，目前这些已经是足够应对大多数的应用场景了

总结

这个项目让我深入了解了 Vue 3 和 TypeScript 的强大功能，同时也提升了我对用户交互和体验设计的认识。

通过这个组件，我们能够有效地帮助用户创建更安全的密码，提升账户的安全性。

这个项目记录了从需求到开发完成的全过程，展示了如何通过技术实现产品目标，并为用户创造价值。