Form Tvarkymas ir Validation įėjimas Next.js

Formų kūrimas ir duomenų atlikimas validation yra esminės žiniatinklio programų kūrimo dalys. Šiame skyriuje išnagrinėsime, kaip kurti formas ir pateikti duomenis validation jūsų Next.js programoje. Taip pat gilinsimės į tokias populiarias form bibliotekas kaip react-hook-form ir Formik efektyviai valdyti form būseną ir atlikti duomenis validation.

Naudojimas react-hook-form tvarkymui Form _

react-hook-form yra biblioteka, kuri supaprastina form būsenos valdymą ir duomenų vykdymą validation jūsų Next.js programoje. Žemiau pateikiamas pavyzdys, kaip naudoti react-hook-form registracijai sukurti 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;  

Anksčiau pateiktame pavyzdyje mes naudojame būsenai react-hook-form valdyti form ir duomenims atlikti validation. Pateikiamas form vartotojui spustelėjus mygtuką Register ir, validation jei tokių yra, rodomos klaidos.

Naudojimas Formik tvarkymui Form _

Formik yra galinga biblioteka, skirta valdyti form būseną, duomenis validation ir tvarkyti su formomis susijusias sąveikas. Štai pavyzdys, kaip naudoti Formik savo Next.js programoje:

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;  

Anksčiau pateiktame pavyzdyje mes naudojame būsenai Formik valdyti form ir duomenims atlikti validation. Validation jei įvyksta klaidos, jos rodomos kaip pranešimai.

Išvada

Šis skyrius supažindino jus su formų kūrimu ir duomenų tvarkymu validation jūsų Next.js programoje. Sužinojote, kaip naudoti react-hook-form ir Formik bibliotekas, kad galėtumėte efektyviai valdyti form būseną ir atlikti duomenis validation. Tai padės sukurti interaktyvias formas, kurios užtikrins geresnę vartotojo patirtį ir greitesnį reagavimą.