Form Håndtering og Validation ind Next.js

Opbygning af formularer og udførelse af data validation er væsentlige dele af udvikling af webapplikationer. I dette afsnit vil vi undersøge, hvordan du opbygger formularer og udfører data validation i din Next.js ansøgning. Vi vil også dykke ned i populære form biblioteker som react-hook-form og Formik for effektivt at administrere form tilstands- og udførende data validation.

Bruges react-hook-form til Form håndtering

react-hook-form er et bibliotek, der forenkler styring af form tilstand og styring af data validation i din Next.js applikation. Nedenfor er et eksempel på, hvordan man bruger react-hook-form til at opbygge 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 ovenstående eksempel bruger vi react-hook-form til at administrere form tilstand og udføre data validation. Den form indsendes, når brugeren klikker på Register knappen, og validation eventuelle fejl vises.

Bruges Formik til Form håndtering

Formik er et kraftfuldt bibliotek til styring af form tilstand, data validation og håndtering af formularrelaterede interaktioner. Her er et eksempel på, hvordan du bruger det 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 ovenstående eksempel bruger vi Formik til at administrere form tilstand og udføre data validation. Validation fejl vises som meddelelser, hvis de opstår.

Konklusion

Dette afsnit har introduceret dig til at bygge formularer og udføre data validation i din Next.js ansøgning. Du har lært, hvordan du bruger bibliotekerne react-hook-form og Formik til effektivt at administrere form tilstand og udføre data validation. Dette vil hjælpe dig med at skabe interaktive formularer, der giver en bedre brugeroplevelse og lydhørhed.