Xử lý Form và Kiểm tra Dữ liệu trong Next.js

Xây dựng biểu mẫu và thực hiện kiểm tra dữ liệu là một phần quan trọng của việc phát triển ứng dụng web. Trong phần này, chúng ta sẽ tìm hiểu cách xây dựng các biểu mẫu và thực hiện kiểm tra dữ liệu trên ứng dụng Next.js. Chúng ta cũng sẽ khám phá các thư viện biểu mẫu phổ biến như react-hook-form và Formik để quản lý trạng thái biểu mẫu và kiểm tra dữ liệu một cách hiệu quả.

Sử dụng react-hook-form để Xử lý Biểu mẫu

react-hook-form là một thư viện giúp quản lý trạng thái biểu mẫu và kiểm tra dữ liệu một cách dễ dàng trong ứng dụng Next.js. Dưới đây là ví dụ về cách sử dụng react-hook-form để xây dựng một biểu mẫu đăng ký:

import { useForm } from 'react-hook-form';

function RegistrationForm() {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        type="text"
        name="username"
        placeholder="Username"
        ref={register({ required: true, minLength: 5 })}
      />
      {errors.username && <p>Username is required and must be at least 5 characters long</p>}

      <input
        type="email"
        name="email"
        placeholder="Email"
        ref={register({ required: true, pattern: /^\S+@\S+$/i })}
      />
      {errors.email && <p>Valid email is required</p>}

      <button type="submit">Register</button>
    </form>
  );
}

export default RegistrationForm;

Trong ví dụ trên, chúng ta sử dụng react-hook-form để quản lý trạng thái biểu mẫu và thực hiện kiểm tra dữ liệu. Biểu mẫu sẽ được gửi đi khi người dùng nhấn nút "Register", và các lỗi kiểm tra dữ liệu sẽ được hiển thị nếu có.

Sử dụng Formik để Xử lý Biểu mẫu

Formik là một thư viện mạnh mẽ giúp quản lý trạng thái biểu mẫu, kiểm tra dữ liệu và xử lý các tương tác liên quan đến biểu mẫu. Dưới đây là ví dụ về cách sử dụng Formik trong ứng dụng Next.js:

import { Formik, Form, Field, ErrorMessage } from 'formik';

function ContactForm() {
  const initialValues = {
    name: '',
    email: '',
  };

  const validate = (values) => {
    const errors = {};

    if (!values.name) {
      errors.name = 'Name is required';
    }

    if (!values.email) {
      errors.email = 'Email is required';
    }

    return errors;
  };

  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <Formik initialValues={initialValues} validate={validate} onSubmit={onSubmit}>
      <Form>
        <div>
          <Field type="text" name="name" placeholder="Name" />
          <ErrorMessage name="name" component="div" />
        </div>
        <div>
          <Field type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
        </div>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

export default ContactForm;

Trong ví dụ trên, chúng ta sử dụng Formik để quản lý trạng thái biểu mẫu và thực hiện kiểm tra dữ liệu. Các lỗi kiểm tra dữ liệu sẽ được hiển thị dưới dạng thông báo nếu có.

Kết Luận

Phần này đã giới thiệu cách xây dựng biểu mẫu và thực hiện kiểm tra dữ liệu trong ứng dụng Next.js. Bạn đã tìm hiểu cách sử dụng thư viện react-hook-form và Formik để quản lý trạng thái biểu mẫu và kiểm tra dữ liệu một cách hiệu quả. Điều này sẽ giúp bạn tạo ra các biểu mẫu tương tác và đáp ứng với trải nghiệm người dùng tốt hơn.