Form Afhandeling en Validation binnen Next.js

Het bouwen van formulieren en het uitvoeren van gegevens validation zijn essentiële onderdelen van de ontwikkeling van webapplicaties. In dit gedeelte onderzoeken we hoe u formulieren kunt maken en gegevens validation in uw Next.js toepassing kunt beheren. We zullen ons ook verdiepen in populaire form bibliotheken zoals react-hook-form en om staats- en prestatiegegevens Formik efficiënt te beheren. form validation

Gebruiken react-hook-form voor Form verwerking

react-hook-form is een bibliotheek die het beheer van form de status en het uitvoeren van gegevens validation in uw Next.js applicatie vereenvoudigt. Hieronder ziet u een voorbeeld van hoe u react-hook-form een registratie kunt opbouwen 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;  

In het bovenstaande voorbeeld gebruiken we react-hook-form om form de status te beheren en gegevens uit te voeren validation. Het form wordt verzonden wanneer de gebruiker op de Register knop klikt en validation eventuele fouten worden weergegeven.

Gebruiken Formik voor Form verwerking

Formik is een krachtige bibliotheek voor het beheren van form status-, gegevens- validation en formuliergerelateerde interacties. Hier is een voorbeeld van hoe u het Formik in uw Next.js toepassing kunt gebruiken:

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;  

In het bovenstaande voorbeeld gebruiken we Formik om form de status te beheren en gegevens uit te voeren validation. Validation fouten worden weergegeven als berichten als ze optreden.

Conclusie

In dit gedeelte heeft u kennisgemaakt met het maken van formulieren en het verwerken van gegevens validation in uw Next.js toepassing. U hebt geleerd hoe u de bibliotheken react-hook-form en kunt gebruiken om de status en uitvoering van gegevens efficiënt te beheren. Hiermee kunt u interactieve formulieren maken die een betere gebruikerservaring en reactievermogen bieden. Formik form validation