close

Form Kushughulikia na Validation ndani Next.js

Kuunda fomu na data ya utendakazi validation ni sehemu muhimu za ukuzaji wa programu ya wavuti. Katika sehemu hii, tutachunguza jinsi ya kuunda fomu na kuendesha data validation katika Next.js programu yako. Pia tutachunguza form maktaba maarufu kama vile react-hook-form na Formik kudhibiti form hali na kutekeleza data ipasavyo validation.

Kutumika react-hook-form kwa Form Kushughulikia

react-hook-form ni maktaba ambayo hurahisisha kudhibiti form hali na kufanya data validation katika Next.js programu yako. Ifuatayo ni mfano wa jinsi ya kutumia react-hook-form kuunda usajili 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;

Katika mfano ulio hapo juu, tunatumia react-hook-form kudhibiti form hali na kutekeleza data validation. Inawasilishwa form mtumiaji anapobofya kitufe Register, na validation makosa yanaonyeshwa ikiwa yapo.

Kutumika Formik kwa Form Kushughulikia

Formik ni maktaba yenye nguvu ya kudhibiti form hali, data validation, na kushughulikia mwingiliano unaohusiana na fomu. Hapa kuna mfano wa jinsi ya kutumia Formik katika Next.js programu yako:

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;

Katika mfano ulio hapo juu, tunatumia Formik kudhibiti form hali na kutekeleza data validation. Validation makosa yanaonyeshwa kama ujumbe ikiwa yanatokea.

Hitimisho

Sehemu hii imekuletea fomu za kuunda na kufanya data validation katika Next.js maombi yako. Umejifunza jinsi ya kutumia react-hook-form na Formik maktaba ili kudhibiti form hali na kutekeleza data ipasavyo validation. Hii itakusaidia kuunda fomu shirikishi zinazotoa hali bora ya utumiaji na mwitikio.