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