Trong quá trình phát triển ứng dụng React, việc xác thực dữ liệu đầu vào là một bước quan trọng để đảm bảo tính toàn vẹn và độ tin cậy của thông tin người dùng nhập vào. Thư viện Yup cung cấp một cách tiếp cận mạnh mẽ và linh hoạt để định nghĩa và kiểm tra các schema dữ liệu.
1. Giới Thiệu Về Yup
Yup là một thư viện JavaScript cho phép bạn xây dựng các schema để phân tích và xác thực giá trị. Nó hỗ trợ việc xác thực các đối tượng phức tạp, mảng, và các kiểu dữ liệu khác nhau một cách dễ dàng.
2. Cài Đặt Yup
Để bắt đầu sử dụng Yup trong dự án React của bạn, hãy cài đặt nó thông qua npm hoặc yarn:
npm install yup
# hoặc
yarn add yup
3. Sử Dụng Yup Để Xác Thực Dữ Liệu
Giả sử bạn có một form đăng ký với các trường: tên, email, và số điện thoại. Bạn muốn đảm bảo rằng:
- Tên không được để trống.
- Email phải có định dạng hợp lệ.
- Số điện thoại chỉ chứa các chữ số và có độ dài nhất định.
Bạn có thể định nghĩa schema Yup như sau:
import * as Yup from 'yup'; const phoneRegExp = /^[0-9]{10}$/; const validationSchema = Yup.object().shape({ name: Yup.string().required('Tên là bắt buộc'), email: Yup.string().email('Email không hợp lệ').required('Email là bắt buộc'), phone: Yup.string() .matches(phoneRegExp, 'Số điện thoại không hợp lệ') .required('Số điện thoại là bắt buộc'),
});
4. Tích Hợp Với Formik
Formik là một thư viện phổ biến để quản lý form trong React. Nó tích hợp tốt với Yup để xử lý xác thực.
Dưới đây là cách bạn có thể sử dụng Yup với Formik:
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup'; const phoneRegExp = /^[0-9]{10}$/; const validationSchema = Yup.object().shape({ name: Yup.string().required('Tên là bắt buộc'), email: Yup.string().email('Email không hợp lệ').required('Email là bắt buộc'), phone: Yup.string() .matches(phoneRegExp, 'Số điện thoại không hợp lệ') .required('Số điện thoại là bắt buộc'),
}); const RegistrationForm = () => { const formik = useFormik({ initialValues: { name: '', email: '', phone: '', }, validationSchema: validationSchema, onSubmit: (values) => { console.log(values); }, }); return ( <form onSubmit={formik.handleSubmit}> <input name="name" value={formik.values.name} onChange={formik.handleChange} /> {formik.errors.name && <div>{formik.errors.name}</div>} <input name="email" value={formik.values.email} onChange={formik.handleChange} /> {formik.errors.email && <div>{formik.errors.email}</div>} <input name="phone" value={formik.values.phone} onChange={formik.handleChange} /> {formik.errors.phone && <div>{formik.errors.phone}</div>} <button type="submit">Đăng ký</button> </form> );
}; export default RegistrationForm;
5. Tùy Biến Xác Thực Với Yup
Yup cho phép bạn tạo các phương thức xác thực tùy chỉnh để đáp ứng các yêu cầu đặc biệt. Ví dụ, nếu bạn muốn kiểm tra rằng một trường "beverage" chỉ nhận giá trị "tea":
const customSchema = Yup.object().shape({ beverage: Yup.string().test( 'is-tea', '${path} phải là "tea"', (value) => value === 'tea' ),
});
6. Xác Thực Bất Đồng Bộ
Yup hỗ trợ xác thực bất đồng bộ, điều này hữu ích khi bạn cần kiểm tra dữ liệu với máy chủ, chẳng hạn như kiểm tra xem email đã được đăng ký chưa:
const asyncSchema = Yup.object().shape({ email: Yup.string() .email('Email không hợp lệ') .required('Email là bắt buộc') .test('checkEmailExists', 'Email đã được sử dụng', async (value) => { const isAvailable = await checkEmailAvailability(value); return isAvailable; }),
});
Trong ví dụ trên, checkEmailAvailability là một hàm bất đồng bộ gửi yêu cầu đến máy chủ để kiểm tra tính khả dụng của email.
🔚Kết Luận
Yup là một công cụ mạnh mẽ giúp bạn xác thực dữ liệu trong ứng dụng React một cách hiệu quả và linh hoạt. Khi kết hợp với các thư viện quản lý form như Formik hoặc React Hook Form, việc xử lý form trở nên đơn giản và dễ bảo trì hơn.
Để tìm hiểu thêm về Yup và các tính năng nâng cao, bạn có thể tham khảo tài liệu chính thức tại https://github.com/jquense/yup.