javascript - is there a way to allow a phone "-" in phone format using numeric in vuelidate?

Question

I'm using vuelidate to validate a form in VUE build. I have a phone number input that needs to be formatted as 222-222-2222 which I have setup using a phone mask. My issue is now the input will not validate when the phone is filled in. My error message is still displayed. Is there a way to allow for numbers only along with a dash "-"???

  <div class="form-field">
        <label for="phone">
          Phone Number
        </label>

        <input type="text" class="form-input text-input" name="phone" id="phone" @input="phoneNumberMask()"
               v-model.trim="$v.formData.phone.$model">

        <label v-if="($v.formData.phone.$dirty && !$v.formData.phone.required)
          || ($v.formData.phone.$dirty && !$v.formData.phone.numeric)
          || ($v.formData.phone.$dirty && !$v.formData.phone.minLength)
          || ($v.formData.phone.$dirty && !$v.formData.phone.maxLength)" class="error">
          Please enter a valid phone number.
        </label>
      </div>


    validations: {
      formData: {
        phone: {
          required,
          numeric,
          minLength: minLength(12),
          maxLength: maxLength(12)
         }
        }
       }

methods: {
  phoneNumberMask(){
        const x = this.formData.phone.replace(/D/g, '').match(/(d{0,3})(d{0,3})(d{0,4})/);
        this.formData.phone = !x[2] ? x[1] : x[1] + '-' + x[2] + (x[3] ? '-' + x[3] : '');
    },
   }

Answer 1

等待大神解答