Integrieren Sie React Hook Form und Zod in die vorhandene E-Mail-Funktion

Integration von React Hook Form und Zod für die E-Mail-Validierung

Frontend: Reagieren Sie mit React Hook Form und 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;

Einrichten des Backends für den E-Mail-Versand

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

Häufig gestellte Fragen zur Integration von React Hook Form und Zod

1. Wie integriere ich React Hook Form mit Zod?
2. Verwenden Sie die Funktion zodResolver aus dem Paket @hookform/resolvers/zod, um die Zod-Validierung mit React Hook Form zu verbinden.
3. Was ist der Zweck von renderToStaticMarkup?
4. renderToStaticMarkup konvertiert React-Komponenten in statische HTML-Strings, die für E-Mail-Inhalte oder andere statische HTML-Anforderungen verwendet werden können.
5. Wie kann ich die Formularübermittlung mit React Hook Form handhaben?
6. Verwenden Sie die Funktion handleSubmit von React Hook Form, um Formularübermittlungen zu verwalten und Daten vor der Verarbeitung zu validieren.
7. Was macht nodemailer.createTransport?
8. nodemailer.createTransport erstellt ein Transportobjekt zum Senden von E-Mails mit einem angegebenen Dienst und Authentifizierungsdetails.
9. Warum ist serverseitige Validierung wichtig?
10. Serverseitige Validierung stellt sicher, dass die vom Server empfangenen Daten gültig sind, bewahrt die Datenintegrität und schützt vor böswilligen Eingaben.

Abschließende Gedanken zur Formularvalidierung und -übermittlung

Die Integration von React Hook Form und Zod zur Formularvalidierung in Ihre React-Anwendungen verbessert die Datenintegrität und das Benutzererlebnis. Durch die Kombination der clientseitigen Validierung mit der serverseitigen Verarbeitung mithilfe von Node.js und Express erstellen Sie eine robuste Lösung für die Verarbeitung von Formularübermittlungen. Dieser Ansatz stellt sicher, dass die Daten ordnungsgemäß validiert und sicher verarbeitet werden, wodurch Fehler reduziert und die Zuverlässigkeit verbessert werden. Durch die Implementierung dieser Vorgehensweisen können Sie die Funktionalität und Sicherheit Ihrer Webformulare erheblich verbessern.