Form Manipularea și Validation în Next.js

Construirea formularelor și efectuarea datelor validation sunt părți esențiale ale dezvoltării aplicațiilor web. În această secțiune, vom explora cum să creați formulare și să conduceți datele în aplicația validation dvs. Next.js De asemenea, vom aprofunda în form biblioteci populare, cum ar fi react-hook-form și Formik pentru a gestiona eficient form starea și a efectua datele validation.

Utilizare react-hook-form pentru Form manipulare

react-hook-form este o bibliotecă care simplifică gestionarea form stării și efectuarea datelor validation în Next.js aplicația dvs. Mai jos este un exemplu de utilizare react-hook-form pentru a crea o înregistrare 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;  

În exemplul de mai sus, folosim react-hook-form pentru a gestiona form starea și a efectua date validation. Este form trimis atunci când utilizatorul face clic pe Register buton, iar validation erorile sunt afișate, dacă există.

Utilizare Formik pentru Form manipulare

Formik este o bibliotecă puternică pentru gestionarea form stării, a datelor validation și a interacțiunilor legate de formulare. Iată un exemplu de utilizare Formik în Next.js aplicația dvs.:

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;  

În exemplul de mai sus, folosim Formik pentru a gestiona form starea și a efectua date validation. Validation erorile sunt afișate ca mesaje dacă apar.

Concluzie

Această secțiune v-a introdus în crearea de formulare și efectuarea datelor validation în Next.js aplicația dvs. Ați învățat cum să utilizați bibliotecile react-hook-form și Formik pentru a gestiona eficient form starea și a efectua datele validation. Acest lucru vă va ajuta să creați formulare interactive care oferă o experiență de utilizator și o capacitate de răspuns mai bune.