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

Вы можете использовать оператор ИЛИ |, чтобы добавить проверку numeri c -only к существующему шаблону

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

Или сделать его более читаемым с помощью двух отдельных проверок

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

Чтобы добавить маску, разделите проверки и измените значение, если это numeri c, например:

<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;
    }
  }
}