Form Kezelés és Validation be Next.js

Az űrlapok összeállítása és az adatok előállítása validation a webalkalmazások fejlesztésének elengedhetetlen része. Ebben a részben megvizsgáljuk, hogyan lehet űrlapokat készíteni és adatokat kezelni validation az alkalmazásban Next.js. form Az olyan népszerű könyvtárakkal is foglalkozunk, mint react-hook-form például az állapot- és teljesítményadatok Formik hatékony kezelése. form validation

Használata react-hook-form kezeléshez Form _

react-hook-form egy olyan könyvtár, amely leegyszerűsíti az állapotkezelést form és az adatok kezelését validation az alkalmazásban Next.js. Az alábbiakban egy példa látható react-hook-form a regisztráció létrehozására 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;  

A fenti példában az állapot react-hook-form kezelésére form és az adatok végrehajtására használjuk validation. Az form elküldésre kerül, amikor a felhasználó rákattint a Register gombra, és validation megjelennek a hibák, ha vannak.

Használata Formik kezeléshez Form _

Formik egy hatékony könyvtár form az állapotok, adatok kezelésére validation és az űrlapokkal kapcsolatos interakciók kezelésére. Íme egy példa arra, hogyan kell használni Formik az alkalmazásban 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;  

A fenti példában az állapot Formik kezelésére form és az adatok végrehajtására használjuk validation. Validation a hibák üzenetként jelennek meg, ha előfordulnak.

Következtetés

Ez a rész bemutatja az űrlapok létrehozását és az adatok kezelését validation az alkalmazásban Next.js. Megtanulta, hogyan használhatja a react-hook-form és könyvtárakat az állapot- és teljesítményadatok Formik hatékony kezelésére. Ez segít interaktív űrlapok létrehozásában, amelyek jobb felhasználói élményt és válaszkészséget biztosítanak. form validation