Form Gudanarwa da Validation ciki Next.js

Siffofin gini da aiwatar da bayanai validation sune mahimman sassa na haɓaka aikace-aikacen yanar gizo. A cikin wannan sashe, za mu bincika yadda ake gina fom da gudanar da bayanai validation a cikin Next.js aikace-aikacenku. Za mu kuma zurfafa cikin shahararrun form ɗakunan karatu kamar react-hook-form kuma Formik don sarrafa form jiha da aiwatar da bayanai yadda ya kamata validation.

Amfani react-hook-form don Form Gudanarwa

react-hook-form ɗakin karatu ne wanda ke sauƙaƙa sarrafa form yanayi da gudanar da bayanai validation a cikin aikace-aikacen ku Next.js. A ƙasa akwai misalin yadda ake amfani da shi react-hook-form don gina rajista 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;  

A cikin misalin da ke sama, muna amfani da mu react-hook-form don sarrafa form jihar da aiwatar da bayanai validation. Ana form ƙaddamar da lokacin lokacin da mai amfani ya danna Register maɓallin, kuma validation ana nuna kurakurai idan akwai.

Amfani Formik don Form Gudanarwa

Formik babban ɗakin karatu ne mai ƙarfi don sarrafa form yanayi, bayanai validation, da ma'amala masu alaƙa da tsari. Ga misalin yadda ake amfani da shi Formik a Next.js aikace-aikacenku:

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;  

A cikin misalin da ke sama, muna amfani da mu Formik don sarrafa form jihar da aiwatar da bayanai validation. Validation ana nuna kurakurai azaman saƙonni idan sun faru.

Kammalawa

Wannan sashe ya gabatar da ku ga ginin fom da gudanar da bayanai validation a cikin aikace-aikacen ku Next.js. Kun koyi yadda ake amfani da react-hook-form dakunan Formik karatu don sarrafa form jihar yadda yakamata da aiwatar da bayanai validation. Wannan zai taimaka muku ƙirƙirar nau'ikan hulɗar da ke ba da ingantaccen ƙwarewar mai amfani da amsawa.