vue 使用正则表达式添加掩码验证输入

Question

我有一个输入字段，我验证@blur。

目标是允许 9 个数字按 3 分组，后面加一个点，例如：

123456789 这应该被屏蔽为123.456.789

但用户也应该可以自己输入123.456.789。

这是我目前得到的，我强制用户输入123.456.789

<input
    @blur="validateNumber($event.target.value)"
>


validateNumber(value) {
  if (/^(\d{3}\.){2}\d{3}$/.test(value)) {
     this.validNumber = true;
     return;
  } 

  this.validNumber = false;
  return;

}

我需要一种方法来允许123456789 并使其成为123.456.789

Answer 1

您可以使用 OR 运算符 | 将仅数字检查添加到现有模式中

(^\d{9}$)|(^(\d{3}\.){2}\d{3}$)

或者通过两个单独的检查使其更具可读性

if (/^\d{9}$/.test(value) || /^(\d{3}\.){2}\d{3}$/.test(value))

要添加掩码，将检查分开并修改值（如果它是数字），例如：

<input v-model="number" @blur="validateNumber">

data() {
  return {
    valid: false,
    number: "",
  };
},
methods: {
  validateNumber() {
    if (/^\d{9}$/.test(this.number)) {
      this.number = this.number.replace(/(\d{3})(\d{3})(\d{3})/, "$1.$2.$3");
      this.valid = true;
    } else if (/^(\d{3}\.){2}\d{3}$/.test(this.number)) {
      this.valid = true;
    } else {
      this.valid = false;
    }
  }
}