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

我有一个输入字段，可以验证

@blur

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

123456789

这应该被屏蔽为

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;

}

但用户也可以自己键入

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;

}

验证枚举器（值）{
if（/^（\d{3}\.）{2}\d{3}$/.test（值））{
this.validNumber=true；
返回；
} 
this.validNumber=false；
返回；
}

---

我需要一种方法来允许

123456789

并使其成为

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;

}

(^\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;
    }
  }
}

数据（）{
返回{
有效：假，
编号：“，
};
},
方法：{
ValidateEnumber（）{
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；
}否则{
this.valid=false；
}
}
}

10位、11位和12位的点应该放在哪里？@TimBiegeleisen它应该始终是12个数字，每3个数字分组，所以始终是3个数字，那么a点我认为这不起作用，如果他们键入123456789，则需要将其屏蔽为123.456.789，如果他们键入123.456.789，则应该可以。我在这里错过了如何在一组3个字符后添加点。我添加了一种方法，可以在值为数字时屏蔽它