Form Hantering och Validation in Next.js

Att bygga formulär och utföra data validation är viktiga delar av webbapplikationsutveckling. I det här avsnittet kommer vi att utforska hur du bygger formulär och utför data validation i din Next.js ansökan. Vi kommer också att fördjupa oss i populära form bibliotek som react-hook-form och Formik för att effektivt hantera form tillstånds- och prestationsdata validation.

Används react-hook-form för Form hantering

react-hook-form är ett bibliotek som förenklar hantering av form tillstånd och hantering av data validation i din Next.js applikation. Nedan är ett exempel på hur man använder react-hook-form för att skapa 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 exemplet ovan använder vi react-hook-form för att hantera form tillstånd och utföra data validation. Den form skickas när användaren klickar på Register knappen, och validation eventuella fel visas.

Används Formik för Form hantering

Formik är ett kraftfullt bibliotek för att hantera form tillstånd, data validation och hantering av formulärrelaterade interaktioner. Här är ett exempel på hur du kan använda Formik i din Next.js applikation:

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 exemplet ovan använder vi Formik för att hantera form tillstånd och utföra data validation. Validation fel visas som meddelanden om de uppstår.

Slutsats

Det här avsnittet har introducerat dig till att bygga formulär och genomföra data validation i din Next.js ansökan. Du har lärt dig hur du använder biblioteken react-hook-form och Formik för att effektivt hantera form tillstånd och utföra data validation. Detta hjälper dig att skapa interaktiva formulär som ger en bättre användarupplevelse och lyhördhet.