CODEWITHSUNDEEP
javascriptregexvue.jsvalidationvue-component
tim neet
tim neet

Reputation: 37

How to use regex expression to check phone number with validation provider and v-slot

I am trying to add the code for phone field validation in vue.js I am trying to check the user phone number with my regex expression and also field will not be empty.

<div v-if="shouldPhoneFieldDisplay" class="flex xs12 sm5">
    <validation-provider v-slot="{ errors }" rules="{ required:true, regex: /^\(?\d{3}\)?[-\s]?\d{3}[-\s]?\d{4}$/ }">
        <label for="bill-to-phone">Phone Number</label>
        <input name="Phone Number" v-model="data.bill.billphone" class="form-control" id="billphone" type="tel" maxlength = "255">
        <span class="error--text">{{ errors[0] }}</span>
    </validation-provider>
</div>

But this is not working, this shows the error on the browser.

Uncaught (in promise) Error: No such validator '{ required, helpers.regex( /^(?d{3})?[-s]?d{3}[-s]?d{4}$/ ) }' exists.

Upvotes: 0

Views: 2047

Answers (1)

Joshua Angnoe
Joshua Angnoe

Reputation: 1075

Using VeeValidator you can declare rules in two ways, as a string list with items seperated by a pipe character:

<validation-rule rules="required|telephone">
</validation-rule>

But it's also possible to provide an object:

<validation-rule v-bind:rules="{ required: true, regex: /.+/ }">
</validation-rule>

In your case you forgot to add v-bind or : to rules, now VeeValidator interprets your rules as a string and complains that it cannot find the rule { require: true, ... }. So the solution would be to add v-bind: or : to rules, like in the previous example.

More info can be found here:

Upvotes: 1

Related Questions