Trong bài reactjs số 8 này, bạn sẽ được học về cách sử dụng thư viện Yup và Formik để thực hiện kiểm tra dữ liệu đầu vào trong ứng dụng ReactJS. Việc kiểm tra dữ liệu đầu vào cẩn thận sẽ giúp ngăn chặn hacker tấn công và thay đổi/lấy trộm dữ liệu.
Bài trước: ReactJS Bài 7: Dùng logging để ghi lại thông tin, giúp gỡ rối hiệu quả
Bước 1: Cài đặt
Bắt đầu bằng cách cài đặt thư viện Yup và Formik trong dự án ReactJS của bạn. Bạn có thể sử dụng npm hoặc yarn để cài đặt:
npm install yup formikBước 2: Import Yup vào dự án
Nhập thư viện Yup vào component mà bạn muốn thực hiện kiểm tra dữ liệu:
import * as yup from 'yup';
import { Formik } from 'formik';Bước 3: Định nghĩa Schema cho việc kiểm tra dữ liệu
Tiếp theo, định nghĩa schema kiểm. Schema kiểm tra là một mô tả định dạng và ràng buộc dữ liệu.
Dưới đây là một ví dụ về schema kiểm tra cho một form đăng ký:
const validationSchema = yup.object().shape({
name: yup.string().required('Yêu cầu tên'),
email: yup.string().email('Email không hợp lệ').required('Yêu cầu email'),
password: yup.string().min(6, 'Mật khẩu phải có ít nhất 6 ký tự').required('Yêu cầu mật khẩu'),
});Trong ví dụ này, chúng ta đã định nghĩa một schema bao gồm ba trường: name, email và password.
Mỗi trường có các quy tắc kiểm tra riêng được định nghĩa bằng cách sử dụng API của Yup:
string(): khai báo dạng dữ liệu là kỹ tựrequired('...'): đảm bảo trường dữ liệu không được phép để trống, kèm theo thông điệp nhắc nhở.min(6, '...'): chỉ định độ dài tối thiểu cho trường mật khẩu là 6 ký tự.
Bước 4: Thực hiện Kiểm tra Dữ liệu
Sau khi bạn đã định nghĩa schema, bạn có thể sử dụng nó để thực hiện kiểm tra dữ liệu mà user đã submit.
const handleSubmit = async (values) => {
try {
await validationSchema.validate(values);
// Dữ liệu hợp lệ, thực hiện hành động tiếp theo
} catch (error) {
// Kiểm tra không thành công, xử lý lỗi
console.log(error);
}
};Trong hàm handleSubmit, chúng ta sử dụng phương thức validate của schema kiểm tra để kiểm tra đối tượng values, chứa dữ liệu biểu mẫu. Nếu dữ liệu hợp lệ, chúng ta có thể tiến hành bước tiếp theo.
Nếu dữ liệu không hợp lệ, một đối tượng lỗi sẽ được trả về, và chúng ta có thể xử lý lỗi theo ý muốn.
Bước 5: Hiển thị Lỗi
Để hiển thị thông báo lỗi cho người dùng, bạn có thể truy cập các thông báo lỗi được tạo ra bởi Yup.
Bạn có thể trích xuất thông báo lỗi cụ thể cho mỗi trường hoặc hiển thị một thông báo lỗi tổng quát. Dưới đây là một ví dụ về hiển thị lỗi cho trường name:
<Formik
initialValues={{ name: '', email: '', password: '' }}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.name && touched.name && <div>{errors.name}</div>}
<input
type="email"
name="email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && touched.email && <div>{errors.email}</div>}
<input
type="password"
name="password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.password && touched.password && <div>{errors.password}</div>}
<button type="submit">Gửi</button>
</form>
)}
</Formik>Trong ví dụ này, chúng ta sử dụng Formik để xử lý trạng thái và kiểm tra biểu mẫu. Chúng ta truy cập các đối tượng errors và touched để kiểm tra xem trường name có lỗi hay không. Nếu cả hai điều kiện đó đúng, chúng ta sẽ hiển thị thông báo lỗi. Cách xử lý tương tự được áp dụng cho email và password
Code Đầy Đủ
Dưới đây là tổng hợp đoạn code đầy đủ cho component sử dụng yup và formik:
import * as yup from 'yup';
import { Formik } from 'formik';
const validationSchema = yup.object().shape({
name: yup.string().required('Yêu cầu tên'),
email: yup.string().email('Email không hợp lệ').required('Yêu cầu email'),
password: yup.string().min(6, 'Mật khẩu phải có ít nhất 6 ký tự').required('Yêu cầu mật khẩu'),
});
const handleSubmit = async (values) => {
try {
await validationSchema.validate(values);
// Dữ liệu hợp lệ, thực hiện hành động tiếp theo
} catch (error) {
// Kiểm tra không thành công, xử lý lỗi
console.log(error);
}
};
const MyForm = () => (
<Formik
initialValues={{ name: '', email: '', password: '' }}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={values.name}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.name && touched.name && <div>{errors.name}</div>}
<input
type="email"
name="email"
value={values.email}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && touched.email && <div>{errors.email}</div>}
<input
type="password"
name="password"
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.password && touched.password && <div>{errors.password}</div>}
<button type="submit">Gửi</button>
</form>
)}
</Formik>
);
export default MyForm;