Інтегруйте React Hook Form і Zod в існуючу функцію електронної пошти

Інтеграція React Hook Form і Zod для перевірки електронної пошти

Інтерфейс: React з React Hook Form і 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;

Налаштування серверної частини для надсилання електронної пошти

Backend: 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. Використовуйте функцію zodResolver з пакету @hookform/resolvers/zod, щоб підключити перевірку Zod до React Hook Form.
3. Яка мета renderToStaticMarkup?
4. renderToStaticMarkup перетворює компоненти React у статичні рядки HTML, які можна використовувати для вмісту електронної пошти чи інших потреб у статичному HTML.
5. Як я можу надсилати форму за допомогою React Hook Form?
6. Використовуйте функцію handleSubmit із React Hook Form, щоб керувати надсиланням форм і перевіряти дані перед їх обробкою.
7. Що робить nodemailer.createTransport?
8. nodemailer.createTransport створює транспортний об’єкт для надсилання електронних листів за допомогою вказаної служби та даних автентифікації.
9. Чому перевірка на стороні сервера важлива?
10. Перевірка на стороні сервера гарантує, що отримані сервером дані є дійсними, зберігаючи цілісність даних і захищаючи від зловмисного введення.

Останні думки щодо перевірки та подання форми

Інтеграція React Hook Form і Zod для перевірки форм у ваших програмах React покращує цілісність даних і покращує взаємодію з користувачем. Поєднуючи перевірку на стороні клієнта з обробкою на стороні сервера за допомогою Node.js і Express, ви створюєте надійне рішення для обробки надсилання форм. Такий підхід гарантує належну перевірку та безпечну обробку даних, що зменшує кількість помилок і підвищує надійність. Застосування цих методів може значно покращити функціональність і безпеку ваших веб-форм.