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