Vue 如何实现确认密码逐字符校验并定位错误字符位置

核心改造逻辑是跳出传统整体字符串相等的校验思路，在输入过程中逐位比对两个密码字段的内容，捕获第一个不匹配的字符位置，向用户输出可定位的错误提示，同时完全兼容现有已实现的必填、最小长度等基础校验规则。

改造Vuelidate自定义校验逻辑 #

原有一致性校验仅返回布尔值判断整体是否匹配，我们新增响应式状态存储字符不匹配的位置，在自定义校验规则内完成逐位比对计算：

data() {
  return {
    password: '',
    repeatPassword: '',
    // 记录第一个不匹配的字符位置，供模板渲染提示
    mismatchPosition: null
  }
},
validations() {
  return {
    password: {
      required: required,
      minLength: minLength(8) // 保留原有密码最小长度校验
    },
    repeatPassword: {
      required: required,
      // 逐字符匹配的自定义校验规则
      characterMatch: (currentValue) => {
        // 空值场景交由必填校验逻辑处理
        if (!currentValue) return true
        this.mismatchPosition = null
        // 逐位遍历输入的确认密码内容
        for (let index = 0; index < currentValue.length; index++) {
          // 定位第一个字符不匹配的位置，转换为用户可读的从1开始计数的序号
          if (currentValue[index] !== this.password[index]) {
            this.mismatchPosition = index + 1
            return false
          }
        }
        // 处理两个字段长度不一致的场景
        if (currentValue.length !== this.password.length) {
          this.mismatchPosition = currentValue.length + 1
          return false
        }
        return true
      }
    }
  }
}

调整模板的错误提示渲染 #

替换原有笼统的一致性提示，基于存储的不匹配位置输出精准引导文案：

<label class="form__group is-required">
  <span class="form__label">Repeat<br>password</span>
  <input
    class="form__input" type="password" name="form-repeat-password"
    v-model="repeatPassword" @input="$v.repeatPassword.$touch"
  >
  <p v-if="$v.repeatPassword.$dirty">
    <span class="form__alert" v-if="!$v.repeatPassword.required">Required.</span>
    <span class="form__alert" v-if="!$v.repeatPassword.characterMatch">
      第 {{ mismatchPosition }} 位输入的字符与原密码不一致，请核对后重新输入
    </span>
  </p>
</label>

关键优化细节 #

• 在原密码字段的@input事件中追加$v.repeatPassword.$touch()调用，当用户修改原密码内容时，确认密码字段的校验会自动重新计算，避免出现提示错位
• 逐位遍历的逻辑计算量极小（常规密码长度仅为6-20位），完全不会影响输入时的响应速度
• 可根据交互需求，在确认密码输入框下方高亮标注对应错误字符位，进一步降低用户的核对成本

适配Vuetify规则写法的改造 #

如果当前项目使用Vuetify的规则校验机制，可直接在规则数组中替换原有整体匹配逻辑：

confirmPasswordRules: [
  (value) => !!value || '请输入确认密码',
  (value) => {
    if (!value) return true
    for (let index = 0; index < value.length; index++) {
      if (value[index] !== this.password[index]) {
        return `第 ${index + 1} 位输入的字符与原密码不一致`
      }
    }
    return value.length === this.password.length || '请输入与原密码完全一致的内容'
  }
]

内容的提问来源于stack exchange，提问作者T dhanunjay