如何在字符串前4个字符后仅插入一次空格？社保号输入格式化

针对你需要的10位社保号码格式（1234 567890），可以通过以下Vue代码实现精准的格式化：

1. 调整输入框配置 #

首先修改input标签，绑定数据模型并调整最大长度（因为要容纳空格，总长度变为11）：

<input type="text" maxlength="11" v-model="socialSecurityNumber" @keyup="formatSSN" />

2. 组件内数据与方法实现 #

在Vue组件中定义数据和格式化方法：

export default {
  data() {
    return {
      socialSecurityNumber: ''
    };
  },
  methods: {
    formatSSN() {
      // 清除所有非数字字符，确保仅保留数字
      let cleanedNum = this.socialSecurityNumber.replace(/[^0-9]/g, '');
      // 限制最多输入10位数字
      cleanedNum = cleanedNum.slice(0, 10);
      
      // 当数字长度超过4时，在前4位后插入空格
      if (cleanedNum.length > 4) {
        this.socialSecurityNumber = `${cleanedNum.slice(0, 4)} ${cleanedNum.slice(4)}`;
      } else {
        this.socialSecurityNumber = cleanedNum;
      }
    }
  }
}

方案说明 #

• 输入清理：自动过滤非数字字符，避免用户输入无效内容；同时限制数字长度不超过10位，符合社保号码要求。
• 动态格式化：当输入的数字超过4位时，自动在前4位后插入空格；删除字符时，空格会随数字长度变化自动消失，保证格式始终正确。
• 长度适配：将input的maxlength设为11，确保格式化后的完整内容（10位数字+1个空格）能正常显示。

替代方案：使用监听属性 #

如果不想依赖keyup事件，也可以通过watch监听数据变化实现自动格式化：

export default {
  data() {
    return {
      socialSecurityNumber: ''
    };
  },
  watch: {
    socialSecurityNumber(newVal) {
      let cleanedNum = newVal.replace(/[^0-9]/g, '').slice(0, 10);
      this.socialSecurityNumber = cleanedNum.length > 4 
        ? `${cleanedNum.slice(0,4)} ${cleanedNum.slice(4)}` 
        : cleanedNum;
    }
  }
}

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