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