AI大模型四步法精准生成Vue3表单组件

前端表单校验实战：登录注册页的TS校验规则详解

登录和注册页面是Web应用中最常见的交互入口，而表单校验则是保障数据合规性的第一道防线。今天，我们来深入探讨一下如何用TypeScript（TS）为登录注册页编写一套健壮的表单校验规则。

1. 用户名（Username）校验规则

用户名作为用户身份的唯一标识，通常需要限制长度并确保必填。我们可以这样设定规则：

必填校验：设置 required: true，当用户名为空时提示“请输入用户名”。
长度限制：通过 min: 5, max: 10 限制用户名必须在5到10个字符之间，超出范围则提示“用户名必须是5-10位字符”。
触发时机：将触发事件设为 blur（失焦触发），这样可以在用户输入框失去焦点时再进行校验，避免输入过程中频繁报错。

2. 密码（Password）校验规则

密码的安全性至关重要，通常要求一定的长度且不能包含空格。我们可以使用正则表达式来进行精准匹配：

必填校验：同样设置 required: true，防止空密码提交。
格式校验：使用正则 /^\S{6,15}$/，要求密码长度为6到15位，且不能包含任何空白字符（\S 匹配非空白字符）。
触发时机：同样采用 blur 触发，提升用户体验。

3. 确认密码（Repassword）校验规则

注册或修改密码时，通常需要用户输入两次密码以确保无误。确认密码的校验不仅包含基础的格式校验，还需要引入自定义校验器来对比两次输入是否一致：

基础校验：同样包含必填校验和与密码一致的正则格式校验。
一致性校验：通过 validator 自定义函数，将当前输入的值（value）与表单模型中的密码值（formModel.password）进行对比。如果不一致，调用 callback(new Error('两次密码不一致')) 抛出错误；如果一致，则调用 callback() 通过校验。
触发时机：自定义校验器同样绑定在 blur 事件上。

完整代码实现

综合以上规则，我们可以整理出以下TypeScript代码。注意，代码中修正了触发器属性的拼写（原代码中的 tirgger 已修正为 trigger）：

const rules = {
  // 用户名校验
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位字符', trigger: 'blur' }
  ],
  // 密码校验
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须是6-15位的非空字符', trigger: 'blur' }
  ],
  // 确认密码校验
  repassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^\S{6,15}$/, message: '密码必须是6-15位的非空字符', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        // 判断两次密码是否一致
        if (value !== formModel.password) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}

通过上述分层的校验逻辑，我们既保证了数据的合法性，又兼顾了用户输入时的流畅体验。在实际项目中，你还可以根据业务需求进一步扩展这些规则，例如增加密码强度校验（必须包含大小写字母和数字）等。