Cách xác thực biểu mẫu với Next.js

Bạn đã bao giờ cố gắng gửi một biểu mẫu, chỉ để trang web cung cấp cho bạn một thông báo lỗi cho bạn biết rằng một hoặc nhiều trường không hợp lệ? Nếu vậy, thì bạn đã trải qua quá trình xác thực biểu mẫu.

Việc xác thực thường là điều cần thiết để có được dữ liệu sạch và có thể sử dụng được. Từ địa chỉ email đến ngày tháng, nếu cần chính xác, bạn cần kiểm tra kỹ.

Xác thực biểu mẫu là gì?

Xác thực biểu mẫu là quá trình đảm bảo rằng dữ liệu được người dùng nhập vào biểu mẫu là chính xác và đầy đủ. Bạn có thể thực hiện việc này ở phía máy khách, sử dụng các tính năng HTML được tích hợp sẵn như thuộc tính bắt buộc. Bạn cũng có thể xác thực trên máy khách bằng JavaScript và có các thư viện Next.js bên ngoài để giúp quá trình này dễ dàng hơn.

Có một số lý do tại sao xác thực biểu mẫu là cần thiết. Đầu tiên, nó giúp đảm bảo rằng dữ liệu được nhập vào biểu mẫu là đầy đủ và chính xác. Điều này rất quan trọng vì nó giúp tránh lỗi khi ứng dụng của bạn gửi dữ liệu đến máy chủ hoặc cơ sở dữ liệu.

Thứ hai, xác thực biểu mẫu có thể giúp cải thiện khả năng sử dụng của biểu mẫu bằng cách cung cấp phản hồi khi người dùng nhập dữ liệu không hợp lệ. Điều này có thể giúp người dùng tránh được sự thất vọng và nhầm lẫn.

Cuối cùng, xác thực biểu mẫu có thể giúp cải thiện tính bảo mật của biểu mẫu bằng cách đảm bảo biểu mẫu chỉ gửi dữ liệu hợp lệ.

Cách xác thực biểu mẫu trong Next.js

Có hai cách để xác thực các biểu mẫu trong Next.js: sử dụng các phương thức tích hợp sẵn hoặc sử dụng thư viện bên ngoài.

Sử dụng các phương pháp tích hợp

HTML cung cấp một số phương pháp để xác thực các biểu mẫu, trong đó phổ biến nhất là yêu cầu thuộc tính. Điều này đảm bảo rằng một trường không được để trống. Bạn có thể sử dụng phương pháp này từ ứng dụng Next.js của mình, chỉ cần đưa thuộc tính vào các thẻ đầu vào mà bạn tạo. HTML cũng cung cấp một họa tiết thuộc tính. Bạn có thể sử dụng điều này cùng với một biểu thức chính quy để xác thực phức tạp hơn.

Ví dụ này bao gồm một biểu mẫu có hai trường: tên và email. Trường tên là bắt buộc và trường email phải khớp với một biểu thức chính quy.

import React from 'react'
class MyForm extends React.Component {
render() {
return (
<form >
<label>
Name:
<input type="text" name="name" required />
</label>
<label>
Email:
<input type="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$" />
</label>
<input type="submit" value="Submit" />
</form>
)
}
}
export default MyForm

Mã này nhập thư viện React, sau đó tạo một lớp gọi là MyForm và hiển thị một phần tử biểu mẫu. Bên trong phần tử biểu mẫu, có hai phần tử nhãn.

Phần tử nhãn đầu tiên chứa trường nhập văn bản bắt buộc. Phần tử nhãn thứ hai chứa trường nhập email có biểu thức chính quy trong thuộc tính mẫu của nó.

Cuối cùng, bạn có một nút gửi. Khi người dùng gửi biểu mẫu, thuộc tính bắt buộc đảm bảo rằng họ đã điền vào trường tên. Thuộc tính mẫu của trường email đảm bảo email ở định dạng được chỉ định. Nếu một trong hai điều kiện này không thành công, biểu mẫu sẽ không được gửi.

Có một số nhược điểm khi sử dụng các phương thức tích hợp sẵn. Đầu tiên, có thể khó theo dõi tất cả các quy tắc xác thực khác nhau mà bạn đã thiết lập. Thứ hai, nếu bạn có nhiều trường, việc thêm thuộc tính bắt buộc vào từng trường sẽ rất tẻ nhạt. Cuối cùng, các phương thức tích hợp chỉ cung cấp xác nhận cơ bản. Nếu bạn muốn thực hiện xác nhận phức tạp hơn, bạn sẽ cần sử dụng thư viện bên ngoài.

Sử dụng thư viện bên ngoài

Ngoài các phương thức có sẵn, cũng có nhiều thư viện bên ngoài mà bạn có thể sử dụng để xác nhận các biểu mẫu. Một số thư viện phổ biến bao gồm Formik, react-hook-form và Yup.

Để sử dụng thư viện bên ngoài, trước tiên bạn cần cài đặt nó. Ví dụ, để cài đặt Formik, hãy chạy lệnh sau:

npm install formik

Khi bạn đã cài đặt thư viện, bạn có thể nhập nó vào thành phần của mình và sử dụng nó để xác thực biểu mẫu của bạn:

import React from 'react'
import { Formik, Form, Field } from 'formik'
const MyForm = () => (
<Formik
initialValues={{ name: '', email: '' }}
validate={values => {
const errors = {}
if (!values.name) {
errors.name = 'Required'
}
if (!values.email) {
errors.email = 'Required'
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address'
}
return errors
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2))
setSubmitting(false)
}, 400)
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="name" />
<Field type="email" name="email" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
)
export default MyForm

Tại đây, trước tiên bạn nhập Formik, Hình thứcvà Đồng ruộng các thành phần từ thư viện Formik. Tiếp theo, tạo một thành phần có tên là MyForm. Thành phần này hiển thị một biểu mẫu có hai trường: tên và email.

Prop ban đầu đặt các giá trị ban đầu của các trường biểu mẫu. Trong trường hợp này, cả hai trường tên và email đều là chuỗi trống.

Phần mềm xác thực đặt ra các quy tắc xác thực cho các trường biểu mẫu. Trong trường hợp này, trường tên là bắt buộc và trường email phải khớp với một biểu thức chính quy.

Hỗ trợ onSubmit đặt chức năng mà React sẽ gọi khi người dùng gửi biểu mẫu. Trong trường hợp này, hàm là một cảnh báo sẽ hiển thị các giá trị của các trường biểu mẫu.

Đề xuất isSubmitting xác định xem biểu mẫu hiện có đang được gửi hay không. Trong trường hợp này, bạn đặt nó thành false.

Cuối cùng, kết xuất biểu mẫu bằng cách sử dụng thành phần Biểu mẫu từ Formik.

Lợi ích của việc sử dụng thư viện bên ngoài trong Next.js

Có một số lợi ích khi sử dụng thư viện bên ngoài như Formik để xác thực các biểu mẫu trong Next.js. Một lợi ích là nó dễ dàng hơn nhiều để hiển thị thông báo lỗi cho người dùng. Ví dụ: nếu một trường bắt buộc không được điền, Formik sẽ tự động hiển thị thông báo lỗi bao gồm một bản sửa lỗi được đề xuất.

Một lợi ích khác là Formik có thể xử lý các quy tắc xác nhận phức tạp hơn. Ví dụ: bạn có thể sử dụng Formik để xác thực rằng hai trường giống nhau (chẳng hạn như mật khẩu và trường xác nhận mật khẩu).

Cuối cùng, Formik giúp dễ dàng gửi dữ liệu biểu mẫu đến máy chủ. Ví dụ: bạn có thể sử dụng Formik để gửi dữ liệu biểu mẫu tới một API.

Tăng mức độ tương tác của người dùng bằng cách sử dụng biểu mẫu

Bạn có thể sử dụng các biểu mẫu để tăng mức độ tương tác của người dùng. Bằng cách cung cấp phản hồi khi người dùng nhập dữ liệu không hợp lệ, bạn có thể tránh được sự thất vọng và nhầm lẫn.

Sử dụng thư viện bên ngoài, bạn có thể thêm các tính năng như tự động hoàn thành và các trường có điều kiện. Những điều này có thể giúp làm cho biểu mẫu của bạn thân thiện hơn với người dùng. Khi được sử dụng đúng cách, biểu mẫu có thể là một công cụ mạnh mẽ giúp bạn tăng mức độ tương tác của người dùng và thu thập dữ liệu bạn cần.

Bên cạnh xác thực, Next.js có nhiều tính năng mà bạn có thể sử dụng để tăng mức độ tương tác của người dùng.