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

集成 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 的常见问题

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 表单的功能和安全性。