Integrer React Hook Form og Zod i eksisterende e-mail-funktion

Integration af React Hook Form og Zod til e-mail-validering

Frontend: Reager med React Hook Form og 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;

Opsætning af backend til afsendelse af e-mail

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

Ofte stillede spørgsmål om integration af React Hook Form og Zod

1. Hvordan integrerer jeg React Hook Form med Zod?
2. Brug zodResolver-funktionen fra @hookform/resolvers/zod-pakken til at forbinde Zod-validering med React Hook Form.
3. Hvad er formålet med renderToStaticMarkup?
4. renderToStaticMarkup konverterer React-komponenter til statiske HTML-strenge, som kan bruges til e-mail-indhold eller andre statiske HTML-behov.
5. Hvordan kan jeg håndtere formularindsendelse med React Hook Form?
6. Brug funktionen handleSubmit fra React Hook Form til at administrere formularindsendelser og validere data, før de behandles.
7. Hvad gør nodemailer.createTransport?
8. nodemailer.createTransport opretter et transportobjekt til at sende e-mails ved hjælp af en specificeret tjeneste og autentificeringsdetaljer.
9. Hvorfor er server-sidevalidering vigtig?
10. Serversidevalidering sikrer, at de data, der modtages af serveren, er gyldige, vedligeholder dataintegriteten og beskytter mod ondsindet input.

Endelige tanker om formularvalidering og indsendelse

At integrere React Hook Form og Zod til formularvalidering i dine React-applikationer forbedrer dataintegriteten og brugeroplevelsen. Ved at kombinere klientsidevalidering med serversidebehandling ved hjælp af Node.js og Express skaber du en robust løsning til håndtering af formularindsendelser. Denne tilgang sikrer, at data er korrekt valideret og sikkert behandlet, hvilket reducerer fejl og forbedrer pålideligheden. Implementering af disse fremgangsmåder kan forbedre funktionaliteten og sikkerheden af ​​dine webformularer markant.