Ενσωματώστε το React Hook Form και το Zod στην υπάρχουσα λειτουργία email

Ενσωμάτωση React Hook Form και Zod για επικύρωση email

Frontend: React with React Hook Form και Zod

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
const schema = z.object({
  fullName: z.string().min(1, "Full Name is required"),
  senderEmail: z.string().email("Invalid email address"),
  phone: z.string().min(10, "Phone number is too short"),
  message: z.string().min(1, "Message is required"),
});
const ContactForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  const onSubmit = async (data) => {
    const finalHtml = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    const finalText = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    try {
      const res = await fetch('/api/sendEmail.json', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          from: 'john@doe.com',
          to: 'john@doe.com',
          subject: 'New message from contact form',
          reply_to: data.senderEmail,
          html: finalHtml,
          text: finalText
        })
      });
    } catch (error) {
      setError('root', { message: error.response.data.message });
    }
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fullName')} placeholder="Full Name" />
      {errors.fullName && <p>{errors.fullName.message}</p>}
      <input {...register('senderEmail')} placeholder="Email" />
      {errors.senderEmail && <p>{errors.senderEmail.message}</p>}
      <input {...register('phone')} placeholder="Phone" />
      {errors.phone && <p>{errors.phone.message}</p>}
      <textarea {...register('message')} placeholder="Message" />
      {errors.message && <p>{errors.message.message}</p>}
      <button type="submit">Send</button>
    </form>
  );
};
export default ContactForm;

Ρύθμιση του Backend για την αποστολή email

Backend: Node.js με Express

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password'
  }
});
app.post('/api/sendEmail.json', (req, res) => {
  const { from, to, subject, reply_to, html, text } = req.body;
  const mailOptions = {
    from, to, subject, replyTo: reply_to, html, text
  };
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send({ message: error.message });
    }
    res.status(200).send({ message: 'Email sent successfully' });
  });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Συχνές ερωτήσεις σχετικά με την ενσωμάτωση του React Hook Form και του Zod

1. Πώς μπορώ να ενσωματώσω το React Hook Form με το Zod;
2. Χρησιμοποιήστε τη συνάρτηση zodResolver από το πακέτο @hookform/resolvers/zod για να συνδέσετε την επικύρωση Zod με τη React Hook Form.
3. Ποιος είναι ο σκοπός του renderToStaticMarkup;
4. Το renderToStaticMarkup μετατρέπει τα στοιχεία React σε στατικές συμβολοσειρές HTML, οι οποίες μπορούν να χρησιμοποιηθούν για περιεχόμενο email ή άλλες ανάγκες στατικού HTML.
5. Πώς μπορώ να χειριστώ την υποβολή φόρμας με το React Hook Form;
6. Χρησιμοποιήστε τη συνάρτηση handleSubmit από την React Hook Form για να διαχειριστείτε τις υποβολές φορμών και να επικυρώσετε δεδομένα πριν την επεξεργασία τους.
7. Τι κάνει το nodemailer.createTransport;
8. Το nodemailer.createTransport δημιουργεί ένα αντικείμενο μεταφοράς για την αποστολή μηνυμάτων ηλεκτρονικού ταχυδρομείου χρησιμοποιώντας μια καθορισμένη υπηρεσία και στοιχεία ελέγχου ταυτότητας.
9. Γιατί είναι σημαντική η επικύρωση από τον διακομιστή;
10. Η Επικύρωση από την πλευρά του διακομιστή διασφαλίζει ότι τα δεδομένα που λαμβάνονται από τον διακομιστή είναι έγκυρα, διατηρώντας την ακεραιότητα των δεδομένων και προστατεύοντας από κακόβουλες εισόδους.

Τελικές σκέψεις σχετικά με την επικύρωση και την υποβολή εντύπων

Η ενσωμάτωση του React Hook Form και του Zod για επικύρωση φόρμας στις εφαρμογές σας React βελτιώνει την ακεραιότητα των δεδομένων και την εμπειρία χρήστη. Συνδυάζοντας την επικύρωση από την πλευρά του πελάτη με την επεξεργασία από την πλευρά του διακομιστή χρησιμοποιώντας Node.js και Express, δημιουργείτε μια ισχυρή λύση για το χειρισμό των υποβολών φορμών. Αυτή η προσέγγιση διασφαλίζει τη σωστή επικύρωση και την ασφαλή επεξεργασία των δεδομένων, μειώνοντας τα σφάλματα και βελτιώνοντας την αξιοπιστία. Η εφαρμογή αυτών των πρακτικών μπορεί να βελτιώσει σημαντικά τη λειτουργικότητα και την ασφάλεια των φορμών ιστού σας.