Mobile Number Validation In Vue.js

Introduction

In this article, we will learn how to validate the mobile number in Vue.js application.

Prerequisites

• Basic Knowledge of Vue.js
• Visual Studio Code
• Node and NPM installed
• Bootstrap (Optional)

Create VueJS Project

Create a Vue.js project by using the following command.

vue create mobilenumvaildapp

Install Bootstrap (Optional)

Install bootstrap using the following command.

npm install bootstrap

Now open the main.js file and add following code. 

import 'bootstrap/dist/css/bootstrap.css';

Now right click on the components folder and add a new component named 'Mobilenum .vue'. Now open Mobilenum .vue component and add the following code.

<template>
    <div id="visa">
        <div class="container">
            <div class="large-12 medium-12 ">

                <div style="margin: 20px;" class="col-sm-12 btn btn-info"> Mobile Number Validation In Vue.js </div>
                <form >
                    <div class="row form-group">
                        <div class="col-sm-4">
                            <label class="control-label col-sm-4" for="Mobilenumber"> <label for="email">Mobile
                                    Number:</label></label>
                        </div>
                        <div class="col-sm-8">
                            <input name="MobileNumber" class="form-control"
                                :class="{ valid: isValidMobileNumber, invalid: !isValidMobileNumber }"
                                v-model="MobileNumber" type="text" @keyup="validateMobileNumber" />
                            <div className="text-danger mrgnbtn" v-if="!isValidMobileNumber">
                                Invalid Mobile Number
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'Mobile',
    data() {
        return {
            MobileNumber: "",
            isValidMobileNumber: true,
        }
    },
    watch: {
        email(value) {
            this.validateEmail(value);
        }
    },
    methods: {
        validateMobileNumber() {
            const validationRegex = /^\d{10}$/;
            if (this.MobileNumber.match(validationRegex)) {
                this.isValidMobileNumber = true;
            } else {
                this.isValidMobileNumber = false;
            }
        },
    }
}
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

In the above code, I have used two states

• MobileNumber:  Modilenumber added in V-model to get the value of textbox, V-model is a directive used for data binding.
• isValidMobileNumber: isValidMobileNumber is used to check whether the value entered is valid or not.

When a user enters some value in the textbox then validateMobileNumber method is called, this method verifies whether the enter values match the validationRegex format or not, if it matches then the entered value is a valid phone number and isValidMobileNumber is set to true, else isValidMobileNumber set to false and show an Invalid Mobile Number error message.

Now open App.vue and add the following code,

<template>
  <Mobile />
</template>
<script>
import Mobile from './components/Mobilenum.vue'
export default {
  name: 'App',
  components: {
    Mobile
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

In the above code, we have added the reference of Mobilenum .vue component inside app.vue file 

Now, run the project by using the 'npm run serve ' command, and check the result.

Summary

In this article, we learned how to validate the mobile number in Vue.js application.