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