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. Αυτό θα σας βοηθήσει να δημιουργήσετε διαδραστικές φόρμες που παρέχουν καλύτερη εμπειρία χρήστη και ανταπόκριση.