Form Håndtering og Validation inn Next.js

Å bygge skjemaer og utføre data validation er viktige deler av utvikling av nettapplikasjoner. I denne delen vil vi utforske hvordan du bygger skjemaer og utfører data validation i Next.js søknaden din. Vi vil også fordype oss i populære form biblioteker som react-hook-form og Formik for å effektivt administrere form tilstands- og ytelsesdata validation.

Brukes react-hook-form til Form håndtering

react-hook-form er et bibliotek som forenkler administrasjon av form tilstand og gjennomføring av data validation i Next.js applikasjonen din. Nedenfor er et eksempel på hvordan du bruker react-hook-form for å bygge en registrering 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;  

I eksemplet ovenfor bruker vi react-hook-form til å administrere form tilstand og utføre data validation. Den form sendes inn når brukeren klikker på Register knappen, og validation eventuelle feil vises.

Brukes Formik til Form håndtering

Formik er et kraftig bibliotek for administrasjon form av tilstand, data validation og håndtering av skjemarelaterte interaksjoner. Her er et eksempel på hvordan du kan bruke det Formik i Next.js applikasjonen din:

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;  

I eksemplet ovenfor bruker vi Formik til å administrere form tilstand og utføre data validation. Validation feil vises som meldinger hvis de oppstår.

Konklusjon

Denne delen har introdusert deg til å bygge skjemaer og utføre data validation i Next.js søknaden din. Du har lært hvordan du bruker bibliotekene react-hook-form og Formik for å effektivt administrere form tilstands- og utføre data validation. Dette vil hjelpe deg med å lage interaktive skjemaer som gir en bedre brukeropplevelse og respons.