将 React Hook Form 和 Zod 集成到现有电子邮件功能中

将 React Hook Form 和 Zod 集成到现有电子邮件功能中
将 React Hook Form 和 Zod 集成到现有电子邮件功能中
Gerald Girard
2024年5月17日星期五 下午2:45:54

通过验证增强您的电子邮件表单

在 React 中实现表单验证可能具有挑战性，尤其是在将 React Hook Form 与其他库集成时。在本指南中，我们将探讨如何将 React Hook Form 和 Zod 验证添加到现有的电子邮件联系表单功能中。

通过遵循此分步方法，您将了解如何增强表单的功能，确保您的电子邮件联系表单强大且可靠。让我们深入了解该流程，让您的表单验证变得无缝。

命令 描述
useForm React Hook Form 提供的一个钩子，用于处理表单状态和验证。
zodResolver 将 Zod 模式验证与 React Hook Form 集成的解析器函数。
renderToStaticMarkup React DOM Server 的一个函数，用于将 React 组件渲染为静态 HTML 字符串。
nodemailer.createTransport 创建一个传输对象以使用 Nodemailer 发送电子邮件。
bodyParser.json 用于解析 Express 中的 JSON 请求正文的中间件。
transporter.sendMail 使用 Nodemailer 中配置的传输对象发送电子邮件的功能。
replyTo Nodemailer 中用于设置电子邮件回复地址的选项。

实施验证和电子邮件功能

前端脚本集成了 React Hook Form 和 Zod 用于表单验证。 useForm 挂钩处理表单状态，zodResolver 函数将 Zod 验证连接到表单。提交表单后， handleSubmit 函数会处理数据。 renderToStaticMarkup 函数将 React 组件转换为静态 HTML 字符串，然后用于生成电子邮件内容。此设置可确保在发送电子邮件之前验证数据，从而提供强大的客户端验证。

后端脚本是使用 Node.js 和 Express 构建的。 bodyParser.json 中间件解析 JSON 请求正文，nodemailer.createTransport 配置电子邮件传输服务。当 API 端点被命中时， transporter.sendMail 函数使用提供的详细信息发送电子邮件。 replyTo 选项设置回复地址，确保正确的电子邮件通信。前端和后端脚本的这种组合提供了一个全面的解决方案，用于处理表单提交和带有验证的电子邮件功能。

集成 React Hook Form 和 Zod 以进行电子邮件验证

前端：使用 React Hook Form 和 Zod 进行 React

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;

设置电子邮件发送后端

后端：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 可以让您有效地定义模式并验证用户输入。这种方法可以防止无效数据被处理并发送到服务器，从而最大限度地减少错误并提高数据质量。

在服务器端，将 Express 与 body-parser 和 Nodemailer 等中间件结合使用，可确保后端能够安全地处理和处理数据。服务器端验证充当第二层防御，验证接收到的数据是否符合预期的格式和值。这种双层验证策略强大而全面，可提供安全且用户友好的体验。

关于集成 React Hook Form 和 Zod 的常见问题

  1. 如何将 React Hook Form 与 Zod 集成？
  2. 使用 @hookform/resolvers/zod 包中的 zodResolver 函数将 Zod 验证与 React Hook Form 连接起来。
  3. renderToStaticMarkup 的目的是什么？
  4. renderToStaticMarkup 将 React 组件转换为静态 HTML 字符串，可用于电子邮件内容或其他静态 HTML 需求。
  5. 如何使用 React Hook Form 处理表单提交？
  6. 使用 React Hook Form 中的 handleSubmit 函数来管理表单提交并在处理数据之前验证数据。
  7. nodemailer.createTransport 是做什么的？
  8. nodemailer.createTransport 创建一个传输对象以使用指定的服务和身份验证详细信息发送电子邮件。
  9. 为什么服务器端验证很重要？
  10. 服务器端验证确保服务器接收到的数据有效，维护数据完整性并防止恶意输入。

关于表单验证和提交的最终想法

在 React 应用程序中集成 React Hook Form 和 Zod 进行表单验证可以增强数据完整性和用户体验。通过使用 Node.js 和 Express 将客户端验证与服务器端处理相结合，您可以创建一个强大的解决方案来处理表单提交。这种方法可确保数据得到正确验证和安全处理，从而减少错误并提高可靠性。实施这些做法可以显着提高 Web 表单的功能和安全性。