Form Pengendalian dan Validation masuk Next.js

Membina borang dan melaksanakan data validation adalah bahagian penting dalam pembangunan aplikasi web. Dalam bahagian ini, kami akan meneroka cara membina borang dan menjalankan data validation dalam permohonan anda Next.js. Kami juga akan menyelidiki form perpustakaan popular seperti react-hook-form dan Formik untuk mengurus form keadaan dan melaksanakan data dengan cekap validation.

Menggunakan react-hook-form untuk Form Pengendalian

react-hook-form ialah perpustakaan yang memudahkan mengurus form keadaan dan menjalankan data validation dalam aplikasi anda Next.js. Di bawah ialah contoh cara menggunakan react-hook-form untuk membina pendaftaran form:

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;  

Dalam contoh di atas, kami gunakan react-hook-form untuk mengurus form keadaan dan melaksanakan data validation. Ia form diserahkan apabila pengguna mengklik Register butang, dan validation ralat dipaparkan jika ada.

Menggunakan Formik untuk Form Pengendalian

Formik ialah perpustakaan yang berkuasa untuk mengurus form keadaan, data validation dan pengendalian interaksi berkaitan borang. Berikut ialah contoh cara menggunakan Formik dalam aplikasi anda 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;  

Dalam contoh di atas, kami gunakan Formik untuk mengurus form keadaan dan melaksanakan data validation. Validation ralat dipaparkan sebagai mesej jika ia berlaku.

Kesimpulan

Bahagian ini telah memperkenalkan anda kepada membina borang dan menjalankan data validation dalam permohonan anda Next.js. Anda telah mempelajari cara menggunakan react-hook-form dan Formik perpustakaan untuk mengurus form keadaan dan melaksanakan data dengan cekap validation. Ini akan membantu anda membuat borang interaktif yang memberikan pengalaman pengguna yang lebih baik dan responsif.