Form Trajtimi dhe Validation në Next.js

Ndërtimi i formularëve dhe kryerja e të dhënave validation janë pjesë thelbësore e zhvillimit të aplikacioneve në internet. Në këtë seksion, ne do të shqyrtojmë se si të ndërtojmë formularë dhe të kryejmë të dhëna validation në Next.js aplikacionin tuaj. Ne do të hulumtojmë gjithashtu në form bibliotekat e njohura si react-hook-form dhe Formik për të menaxhuar në mënyrë efikase form të dhënat e gjendjes dhe performancës validation.

Përdorimi react-hook-form për Form Trajtim

react-hook-form është një bibliotekë që thjeshton menaxhimin form e gjendjes dhe kryerjen e të dhënave validation në Next.js aplikacionin tuaj. Më poshtë është një shembull se si të përdoret react-hook-form për të ndërtuar një regjistrim 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ë shembullin e mësipërm, ne përdorim react-hook-form për të menaxhuar form gjendjen dhe kryerjen e të dhënave validation. Dorëzohet form kur përdoruesi klikon butonin Register dhe validation shfaqen gabime nëse ka.

Përdorimi Formik për Form Trajtim

Formik është një bibliotekë e fuqishme për menaxhimin e form gjendjes, të dhënave validation dhe trajtimin e ndërveprimeve të lidhura me format. Këtu është një shembull se si të përdorni Formik në Next.js aplikacionin tuaj:

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ë shembullin e mësipërm, ne përdorim Formik për të menaxhuar form gjendjen dhe kryerjen e të dhënave validation. Validation gabimet shfaqen si mesazhe nëse ndodhin.

konkluzioni

Ky seksion ju ka njohur me ndërtimin e formularëve dhe kryerjen e të dhënave validation në Next.js aplikacionin tuaj. Ju keni mësuar se si të përdorni bibliotekat react-hook-form dhe Formik për të menaxhuar në mënyrë efikase form të dhënat e gjendjes dhe performancës validation. Kjo do t'ju ndihmojë të krijoni forma ndërvepruese që ofrojnë një përvojë dhe reagim më të mirë të përdoruesit.