ArticleZip > Validate Phone Number With Yup

Validate Phone Number With Yup

When working on applications that require user input, ensuring that the information they provide is in the correct format is crucial. One common type of input validation is checking if a phone number is valid. In this article, we will guide you through the process of validating a phone number using the Yup library in JavaScript.

Yup is a schema builder for value parsing and validation. It allows you to create schemas to validate data against specific criteria. When it comes to phone numbers, Yup provides an easy and efficient way to define the format that a valid phone number should adhere to.

First, you'll need to install Yup in your project. You can do this using npm or yarn by running the following command:

Bash

npm install yup

Once Yup is installed, you can start using it to validate phone numbers. Below is an example of how you can define a schema for a phone number validation using Yup:

Javascript

import * as yup from 'yup';

const phoneSchema = yup.string().matches(/^[0-9]{10}$/, 'Phone number is not valid');

In the code snippet above, we create a Yup schema for a phone number that consists of exactly 10 digits. The `matches` method is used to define the regular expression pattern that the phone number should match. If the phone number does not match the specified pattern, a validation error with the message 'Phone number is not valid' will be triggered.

Next, you can use this schema to validate phone numbers in your application. Here's an example of how you can validate a phone number using the schema we defined:

Javascript

const phoneNumber = '1234567890';

phoneSchema.validate(phoneNumber)
  .then(() => {
    console.log('Phone number is valid');
  })
  .catch((error) => {
    console.error(error.errors[0]);
  });

In the code above, we attempt to validate the phone number '1234567890' against the schema we defined earlier. If the phone number is valid, the success message 'Phone number is valid' will be printed to the console. If the phone number is invalid, the validation error message will be displayed.

Yup provides a powerful and flexible way to validate data in your applications, including phone numbers. By defining schemas with specific validation criteria, you can ensure that the phone numbers entered by users meet the required format.

In conclusion, validating phone numbers with Yup is a straightforward process that can help you maintain data integrity and improve the user experience in your applications. By following the steps outlined in this article, you can easily implement phone number validation in your JavaScript projects.

Related posts:

×