请求修复Vue.js中邮政编码自动格式化的handlePostalCode方法

需求说明 #

• 自动格式化邮政编码，支持两种格式：
  • 字母数字混合输入（如L9V0C7）自动转换为A0A 0A0样式（即L9V 0C7），最大长度6字符
  • 纯数字输入（如12345）保持原样，最大长度5字符
• 当前问题：输入L9V0时，数字0会消失，无法继续完成输入

现有代码 #

模板部分 #

<v-text-field
    label='邮政编码'
    class="required"
    v-model='postal_code'
    required
    @input="handlePostalCode"
    validate-on-blur
    :rules='postalCodeRules'>
</v-text-field>

脚本部分 #

postalCodeRules: [
  value => /^[A-z]\d[A-z] \d[A-z]\d$|^\d\d\d\d\d$/.test(value) || '请使用A0A 0A0或12345格式'
]

handlePostalCode() {
 if (this.postal_code.match(/^[0-9]+$/) != null) {
      var replacedInput = this.postal_code.replace(/\D/g, '').match(/(\d{0,3})(\d{0,2})/);
      this.postal_code = !replacedInput[2] ? replacedInput[1] : replacedInput[1] + '' + replacedInput[2];
 }
 else {
      var replacedInput = this.postal_code.match(/(\w{0,3})(\w{0,3})/);
      console.log(replacedInput)
      this.postal_code = !replacedInput[2] ? replacedInput[1] : replacedInput[1] + ' ' + replacedInput[2];
 }
}

问题根源 #

现有handlePostalCode方法的字母数字分支存在两个核心问题：

1. 使用\w匹配字符（包含下划线），且未过滤输入中的空格，导致第一次格式化后出现的空格会干扰后续匹配逻辑
2. 当输入到第4个字符（如L9V0）时，格式化后变为L9V 0，再次触发input事件时，\w不匹配空格，导致第二组的0被丢弃，最终只保留L9V

修复后的代码 #

修复后的handlePostalCode方法 #

handlePostalCode() {
  // 先过滤所有非字母数字的字符，避免空格或特殊字符干扰
  const cleanInput = this.postal_code.replace(/[^A-Za-z0-9]/g, '');

  if (/^[0-9]+$/.test(cleanInput)) {
    // 纯数字情况：限制最大长度5位，直接截取
    this.postal_code = cleanInput.slice(0, 5);
  } else {
    // 字母数字混合情况：限制最大长度6位，按3位一组添加空格
    const trimmedInput = cleanInput.slice(0, 6);
    const firstPart = trimmedInput.slice(0, 3);
    const secondPart = trimmedInput.slice(3);
    // 只有当第二部分有内容时才添加空格
    this.postal_code = secondPart ? `${firstPart} ${secondPart}` : firstPart;
  }
}

优化后的验证规则（可选） #

如果希望输入过程中不显示错误提示（仅在失去焦点时验证完整格式），可以调整规则：

postalCodeRules: [
  value => {
    if (!value) return '邮政编码不能为空';
    // 允许输入过程中的部分格式，仅验证完整格式是否符合要求
    const isCompleteValid = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$|^\d{5}$/.test(value);
    const isPartialValid = /^[A-Za-z0-9]{0,3}$|^[A-Za-z0-9]{3} ?[A-Za-z0-9]{0,3}$|^\d{0,5}$/.test(value);
    return isCompleteValid || isPartialValid || '请使用A0A 0A0或12345格式';
  }
]

修复效果 #

• 输入L9V0时，会自动格式化为L9V 0，后续继续输入C7会变为L9V 0C7
• 纯数字输入如1234保持原样，输入到第5位后无法继续输入更多数字
• 所有非字母数字的输入会被自动过滤，不会干扰格式化逻辑

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