Form Ravnanje Validation in v Next.js

Gradnja obrazcev in izvajanje podatkov validation sta bistvena dela razvoja spletnih aplikacij. V tem razdelku bomo raziskali, kako zgraditi obrazce in voditi podatke validation v vaši Next.js aplikaciji. Poglobili se bomo tudi v priljubljene form knjižnice, kot sta react-hook-form in Formik za učinkovito upravljanje form podatkov o stanju in zmogljivosti validation.

Uporaba react-hook-form za Form ravnanje

react-hook-form je knjižnica, ki poenostavlja upravljanje form stanja in vodenje podatkov validation v vaši Next.js aplikaciji. Spodaj je primer uporabe react-hook-form za izdelavo registracije 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;  

V zgornjem primeru uporabljamo react-hook-form za upravljanje form stanja in izvajanje podatkov validation. Odda se form, ko uporabnik klikne Register gumb, in validation prikažejo se napake, če obstajajo.

Uporaba Formik za Form ravnanje

Formik je zmogljiva knjižnica za upravljanje form stanja, podatkov validation in obdelavo interakcij, povezanih z obrazci. Tukaj je primer uporabe Formik v vaši Next.js aplikaciji:

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;  

V zgornjem primeru uporabljamo Formik za upravljanje form stanja in izvajanje podatkov validation. Validation napake so prikazane kot sporočila, če se pojavijo.

Zaključek

Ta razdelek vas je seznanil z izdelavo obrazcev in vodenjem podatkov validation v vaši Next.js aplikaciji. Naučili ste se uporabljati knjižnice react-hook-form in Formik za učinkovito upravljanje form podatkov o stanju in izvajanju validation. Tako boste lahko ustvarili interaktivne obrazce, ki zagotavljajo boljšo uporabniško izkušnjo in odzivnost.