Tích hợp React Hook Form và Zod vào chức năng email hiện có

Tích hợp React Hook Form và Zod để xác thực email

Frontend: React với React Hook Form và 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;

Thiết lập phần cuối để gửi email

Phần cuối: Node.js với 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');
});

Câu hỏi thường gặp về việc tích hợp React Hook Form và Zod

1. Làm cách nào để tích hợp React Hook Form với Zod?
2. Sử dụng hàm zodResolver từ gói @hookform/resolvers/zod để kết nối xác thực Zod với React Hook Form.
3. Mục đích của renderToStaticMarkup là gì?
4. renderToStaticMarkup chuyển đổi các thành phần React thành các chuỗi HTML tĩnh, có thể được sử dụng cho nội dung email hoặc các nhu cầu HTML tĩnh khác.
5. Làm cách nào tôi có thể xử lý việc gửi biểu mẫu bằng React Hook Form?
6. Sử dụng hàm handSubmit từ React Hook Form để quản lý việc gửi biểu mẫu và xác thực dữ liệu trước khi xử lý.
7. nodemailer.createTransport làm gì?
8. nodemailer.createTransport tạo một đối tượng truyền tải để gửi email bằng cách sử dụng một dịch vụ được chỉ định và chi tiết xác thực.
9. Tại sao xác thực phía máy chủ lại quan trọng?
10. Xác thực phía máy chủ đảm bảo rằng dữ liệu mà máy chủ nhận được là hợp lệ, duy trì tính toàn vẹn của dữ liệu và bảo vệ khỏi các dữ liệu đầu vào độc hại.

Suy nghĩ cuối cùng về việc xác thực và gửi biểu mẫu

Việc tích hợp React Hook Form và Zod để xác thực biểu mẫu trong ứng dụng React của bạn sẽ nâng cao tính toàn vẹn dữ liệu và trải nghiệm người dùng. Bằng cách kết hợp xác thực phía máy khách với xử lý phía máy chủ bằng Node.js và Express, bạn tạo ra một giải pháp mạnh mẽ để xử lý việc gửi biểu mẫu. Cách tiếp cận này đảm bảo rằng dữ liệu được xác thực hợp lệ và xử lý an toàn, giảm thiểu sai sót và cải thiện độ tin cậy. Việc triển khai các phương pháp này có thể cải thiện đáng kể chức năng và tính bảo mật của biểu mẫu web của bạn.