Integra React Hook Form i Zod a la funció de correu electrònic existent

Integració de React Hook Form i Zod per a la validació del correu electrònic

Frontend: Reacciona amb React Hook Form i 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;

Configuració del backend per a l'enviament de correu electrònic

Backend: Node.js amb 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');
});

Preguntes freqüents sobre la integració de React Hook Form i Zod

1. Com integro React Hook Form amb Zod?
2. Utilitzeu la funció zodResolver del paquet @hookform/resolvers/zod per connectar la validació Zod amb React Hook Form.
3. Quin és l'objectiu de renderToStaticMarkup?
4. renderToStaticMarkup converteix els components de React en cadenes HTML estàtiques, que es poden utilitzar per al contingut del correu electrònic o per a altres necessitats HTML estàtiques.
5. Com puc gestionar l'enviament de formularis amb React Hook Form?
6. Utilitzeu la funció handleSubmit de React Hook Form per gestionar els enviaments de formularis i validar les dades abans de processar-los.
7. Què fa nodemailer.createTransport?
8. nodemailer.createTransport crea un objecte de transport per enviar correus electrònics mitjançant un servei especificat i detalls d'autenticació.
9. Per què és important la validació del costat del servidor?
10. La validació del costat del servidor garanteix que les dades rebudes pel servidor siguin vàlides, mantenint la integritat de les dades i protegint-les contra entrades malicioses.

Consideracions finals sobre la validació i l'enviament del formulari

La integració de React Hook Form i Zod per a la validació de formularis a les vostres aplicacions React millora la integritat de les dades i l'experiència de l'usuari. En combinar la validació del client amb el processament del servidor mitjançant Node.js i Express, creeu una solució sòlida per gestionar els enviaments de formularis. Aquest enfocament garanteix que les dades es validin correctament i es processin de manera segura, reduint els errors i millorant la fiabilitat. La implementació d'aquestes pràctiques pot millorar significativament la funcionalitat i la seguretat dels vostres formularis web.