Vue Js validate phone numbers for both India and the US :The process involves creating a custom directive and using regular expressions to match the phone number format for both countries. The directive can then be reused throughout the application, ensuring that all phone numbers entered by users are in the correct format. This not only makes the application user-friendly but also ensures that the data collected is clean and accurate. So, if you’re looking to validate phone numbers for India and the US in your Vue.js application, we provide in this tutorial how to validate Phone Number.

How to Create Validation of Phone Numbers in Vue Js?

This code is a Vue.js app that validates the phone number entered by the user. The app is created using the Vue constructor, and it’s defined inside an HTML element with an id of “app”.

The input field is bound to the “phoneNumber” property of the Vue instance’s data object, and an event listener is added to the input event. Whenever the input value changes, the “validatePhoneNumber” method is triggered.

The “validatePhoneNumber” method uses a regular expression to check if the phone number entered by the user is valid or not. If the phone number is empty, it sets an error message that states the field cannot be empty. If the phone number does not match the pattern defined in the regular expression, it sets an error message stating that the phone number is invalid. If the phone number is valid, it sets the error message to an empty string.

Two HTML elements are used to  display the length of the phone number and the error message, if any. The length of the phone number is displayed using a Vue directive that interpolates the length of the phone number and the error message, if any. The length of the phone number is displayed using a Vue directive that interpolates the length of the phone number. The error message is displayed if the “errorMessage” property of the Vue instance’s data object is not an empty string.

Validation of Indian Phone Numbers in Vue.jS

<div id="app">
  <input type="text" v-model="phoneNumber" @input="validatePhoneNumber" />
  <pre v-if="phoneNumber">Phone Number Length {{phoneNumber.length}}</pre>
  <pre v-if="errorMessage" style="color:red">{{ errorMessage }}</pre>
</div>
 <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    phoneNumber: '',
                    errorMessage: ''
                };
            },
            methods: {
                validatePhoneNumber() {
                    const phoneNumber = this.phoneNumber;
                    const Regex = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[6789]\d{9}$/;


                    if (this.phoneNumber === '') {
                        this.errorMessage = 'Phone Number field cannot be empty';
                    }

                    else if (!Regex.test(phoneNumber)) {
                        this.errorMessage = 'Invalid phone number';
                    }
                    else {
                        this.errorMessage = '';
                    }
                }
            }

        })
  </script>

Output of above example

How to Validate Phone Number for USA in Vue Js?

Phone number validation in Vue.js can be done using regular expressions. A regular expression, also known as a regex, is a pattern that can be used to match a string. In the case of phone numbers, we can use a regex pattern to match the format of a USA phone number.

A common format for USA phone numbers is (123) 456-7890. Here’s the regular expression pattern for this format:

Vue Js Validate Phone Number for USA | Example

<div id="app">
  <form>
     <input type="text" v-model="phoneNumber" />
     <pre v-if="phoneNumber">Phone Number Length {{phoneNumber.length}}</pre>
     <p v-if="isValid">Valid Phone Number</p>
     <p v-else style='color:red'>Invalid Phone Number</p>
  </form>
</div>
 <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    phoneNumber: '',
                };
            },
            computed: {
                isValid() {
                    return /^(?:\(\d{3}\)|\d{3}[.-]?)\d{3}[.-]?\d{4}$/.test(this.phoneNumber);
                },
            },

        })
</script>

Output of above example