Form დამუშავება და Validation ში Next.js

ფორმების შექმნა და მონაცემების შესრულება validation არის ვებ აპლიკაციის განვითარების მნიშვნელოვანი ნაწილი. ამ განყოფილებაში ჩვენ განვიხილავთ, თუ როგორ უნდა ავაშენოთ ფორმები და ჩავატაროთ მონაცემები validation თქვენს Next.js აპლიკაციაში. ჩვენ ასევე ჩავუღრმავდებით პოპულარულ form ბიბლიოთეკებს, როგორიცაა react-hook-form და Formik ეფექტურად ვმართავთ form მდგომარეობისა და შესრულების მონაცემებს validation.

გამოყენება react-hook-form დამუშავებისთვის Form _

react-hook-form არის ბიბლიოთეკა, რომელიც ამარტივებს form მდგომარეობის მართვას და მონაცემთა წარმართვას validation თქვენს Next.js აპლიკაციაში. ქვემოთ მოცემულია მაგალითი იმისა, თუ როგორ გამოიყენოთ react-hook-form რეგისტრაციის შესაქმნელად 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;  

ზემოთ მოყვანილ მაგალითში ვიყენებთ მდგომარეობის react-hook-form მართვისა form და მონაცემების შესასრულებლად validation. იგზავნება form, როდესაც მომხმარებელი დააწკაპუნებს ღილაკზე Register და validation შეცდომები გამოჩნდება, ასეთის არსებობის შემთხვევაში.

გამოყენება Formik დამუშავებისთვის Form _

Formik არის ძლიერი ბიბლიოთეკა form მდგომარეობის, მონაცემების მართვისა validation და ფორმასთან დაკავშირებული ურთიერთქმედებების მართვისთვის. აქ არის მაგალითი იმისა, თუ როგორ გამოიყენოთ Formik თქვენს Next.js აპლიკაციაში:

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;  

ზემოთ მოყვანილ მაგალითში ვიყენებთ მდგომარეობის Formik მართვისა form და მონაცემების შესასრულებლად validation. Validation შეცდომები გამოჩნდება შეტყობინებების სახით, თუ ისინი მოხდება.

დასკვნა

ამ განყოფილებამ გაგაცნოთ ფორმების შექმნა და მონაცემების წარმართვა validation თქვენს Next.js აპლიკაციაში. თქვენ ისწავლეთ, თუ როგორ გამოიყენოთ react-hook-form და Formik ბიბლიოთეკები, რათა ეფექტურად მართოთ form მდგომარეობა და შეასრულოთ მონაცემები validation. ეს დაგეხმარებათ შექმნათ ინტერაქტიული ფორმები, რომლებიც უზრუნველყოფენ მომხმარებლის უკეთეს გამოცდილებას და რეაგირებას.