Integrați React Hook Form și Zod în funcția de e-mail existentă

Integrarea formularului React Hook și Zod pentru validarea e-mailului

Frontend: Reacționează cu React Hook Form și 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;

Configurarea backend-ului pentru trimiterea de e-mailuri

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

Întrebări frecvente despre integrarea React Hook Form și Zod

1. Cum integrez React Hook Form cu Zod?
2. Utilizați funcția zodResolver din pachetul @hookform/resolvers/zod pentru a conecta validarea Zod cu React Hook Form.
3. Care este scopul renderToStaticMarkup?
4. renderToStaticMarkup convertește componentele React în șiruri HTML statice, care pot fi folosite pentru conținutul de e-mail sau alte necesități HTML statice.
5. Cum pot gestiona trimiterea formularelor cu Formular React Hook?
6. Utilizați funcția handleSubmit din React Hook Form pentru a gestiona trimiterile de formulare și pentru a valida datele înainte de a le procesa.
7. Ce face nodemailer.createTransport?
8. nodemailer.createTransport creează un obiect de transport pentru a trimite e-mailuri folosind un serviciu specificat și detalii de autentificare.
9. De ce este importantă validarea pe server?
10. Validarea pe partea serverului asigură că datele primite de server sunt valide, menținând integritatea datelor și protejând împotriva intrărilor rău intenționate.

Considerări finale despre validarea și trimiterea formularelor

Integrarea React Hook Form și Zod pentru validarea formularelor în aplicațiile dvs. React îmbunătățește integritatea datelor și experiența utilizatorului. Combinând validarea clientului cu procesarea serverului folosind Node.js și Express, creați o soluție robustă pentru gestionarea trimiterilor de formulare. Această abordare asigură că datele sunt validate corespunzător și procesate în siguranță, reducând erorile și îmbunătățind fiabilitatea. Implementarea acestor practici poate îmbunătăți semnificativ funcționalitatea și securitatea formularelor dvs. web.