Form Käsittely ja Validation sisään Next.js

Lomakkeiden rakentaminen ja tietojen suorittaminen validation ovat olennaisia ​​​​osia verkkosovellusten kehittämisessä. Tässä osiossa tutkimme, kuinka voit luoda lomakkeita ja käyttää tietoja validation sovelluksessasi Next.js. Tutustumme myös suosittuihin form kirjastoihin, kuten react-hook-form ja Formik hallitsemme tehokkaasti form tila- ja suoritustietoja validation.

Käyttö react-hook-form käsittelyyn Form _

react-hook-form on kirjasto, joka yksinkertaistaa form tilan hallintaa ja tietojen suorittamista validation sovelluksessasi Next.js. Alla on esimerkki rekisteröinnin react-hook-form rakentamisesta 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;  

Yllä olevassa esimerkissä käytämme tilan react-hook-form hallintaan form ja tietojen suorittamiseen validation. Lähetetään form, kun käyttäjä napsauttaa painiketta Register, ja validation mahdolliset virheet näytetään.

Käyttö Formik käsittelyyn Form _

Formik on tehokas kirjasto tilan form, tietojen hallintaan validation ja lomakkeisiin liittyvien vuorovaikutusten käsittelyyn. Tässä on esimerkki siitä, kuinka voit käyttää Formik sitä sovelluksessasi 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;  

Yllä olevassa esimerkissä käytämme tilan Formik hallintaan form ja tietojen suorittamiseen validation. Validation virheet näytetään viesteinä, jos niitä ilmenee.

Johtopäätös

Tämä osio on tutustuttanut sinut lomakkeiden rakentamiseen ja tietojen suorittamiseen validation sovelluksessasi Next.js. Olet oppinut käyttämään react-hook-form ja kirjastoja tilan ja suoritustietojen Formik tehokkaaseen hallintaan. Tämä auttaa sinua luomaan interaktiivisia lomakkeita, jotka tarjoavat paremman käyttökokemuksen ja reagointikyvyn. form validation