Form การจัดการและ Validation ใน Next.js

การสร้างแบบฟอร์มและข้อมูลการปฏิบัติงาน validation เป็นส่วนสำคัญของการพัฒนาเว็บแอปพลิเคชัน ในส่วนนี้ เราจะสำรวจวิธีสร้างแบบฟอร์มและดำเนินการข้อมูล validation ใน Next.js แอปพลิเคชัน ของคุณ นอกจากนี้เรายังจะเจาะลึก form ไลบรารียอดนิยมเช่น react-hook-form และ Formik เพื่อจัดการ form สถานะและดำเนินการข้อมูล validation อย่าง มีประสิทธิภาพ

ใช้ react-hook-form สำหรับ Form การจัดการ

react-hook-form เป็นไลบรารีที่ทำให้การจัดการ form สถานะและการดำเนินการข้อมูล validation ใน Next.js แอปพลิเคชัน ของคุณง่ายขึ้น ด้านล่างนี้เป็นตัวอย่างวิธีการใช้ react-hook-form เพื่อสร้างการลงทะเบียน 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;  

ในตัวอย่างข้างต้น เราใช้ react-hook-form เพื่อจัดการ form สถานะและดำเนินการ validation ข้อมูล จะ form ถูกส่งเมื่อผู้ใช้คลิก Register ปุ่ม และ validation ข้อผิดพลาดจะปรากฏขึ้นหากมี

ใช้ Formik สำหรับ Form การจัดการ

Formik เป็นไลบรารีที่มีประสิทธิภาพสำหรับการจัดการ form สถานะ ข้อมูล validation และการจัดการการโต้ตอบที่เกี่ยวข้องกับแบบฟอร์ม นี่คือตัวอย่างวิธีใช้ Formik ใน 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;  

ในตัวอย่างข้างต้น เราใช้ Formik เพื่อจัดการ form สถานะและดำเนินการ validation ข้อมูล Validation ข้อผิดพลาดจะแสดงเป็นข้อความหากเกิดขึ้น

บทสรุป

ส่วนนี้จะแนะนำให้คุณรู้จักกับการสร้างแบบฟอร์มและการดำเนินการข้อมูล validation ใน Next.js แอปพลิเคชัน ของคุณ คุณได้เรียนรู้วิธีการใช้ react-hook-form และ Formik ไลบรารีเพื่อจัดการ form สถานะและดำเนินการข้อมูล validation อย่าง มีประสิทธิภาพ สิ่งนี้จะช่วยคุณสร้างแบบฟอร์มเชิงโต้ตอบที่มอบประสบการณ์ผู้ใช้และการตอบสนองที่ดีขึ้น