title: is there a way to allow a phone "-" in phone format using numeric in vuelidate?
body: <p>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 &quot;-&quot;???</p>
  <pre><code>  &lt;div class=&quot;form-field&quot;&gt;
          &lt;label for=&quot;phone&quot;&gt;
            Phone Number
          &lt;/label&gt;
  
          &lt;input type=&quot;text&quot; class=&quot;form-input text-input&quot; name=&quot;phone&quot; id=&quot;phone&quot; @input=&quot;phoneNumberMask()&quot;
                 v-model.trim=&quot;$v.formData.phone.$model&quot;&gt;
  
          &lt;label v-if=&quot;($v.formData.phone.$dirty &amp;&amp; !$v.formData.phone.required)
            || ($v.formData.phone.$dirty &amp;&amp; !$v.formData.phone.numeric)
            || ($v.formData.phone.$dirty &amp;&amp; !$v.formData.phone.minLength)
            || ($v.formData.phone.$dirty &amp;&amp; !$v.formData.phone.maxLength)&quot; class=&quot;error&quot;&gt;
            Please enter a valid phone number.
          &lt;/label&gt;
        &lt;/div&gt;
  
  
      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] : '');
      },
     }
  </code></pre>