Integrálja a React Hook Form-ot és a Zod-ot a meglévő e-mail funkcióba

A React Hook Form és a Zod integrálása az e-mailek érvényesítéséhez

Frontend: React Hook Form és Zod segítségével

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;

A háttérrendszer beállítása e-mail küldéshez

Háttér: Node.js Expresszel

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');
});

Gyakran ismételt kérdések a React Hook Form és a Zod integrálásával kapcsolatban

1. Hogyan integrálhatom a React Hook Form-ot a Zod-dal?
2. Használja a @hookform/resolvers/zod csomag zodResolver funkcióját a Zod érvényesítés és a React Hook Form összekapcsolásához.
3. Mi a renderToStaticMarkup célja?
4. A renderToStaticMarkup a React összetevőket statikus HTML-karakterláncokká alakítja, amelyek felhasználhatók e-mail-tartalomhoz vagy más statikus HTML-szükségletekhez.
5. Hogyan kezelhetem az űrlapok benyújtását a React Hook Form segítségével?
6. A React Hook Form handleSubmit funkciójával kezelheti az űrlapok beküldését, és ellenőrizheti az adatokat a feldolgozás előtt.
7. Mit csinál a nodemailer.createTransport?
8. A nodemailer.createTransport egy szállítási objektumot hoz létre az e-mailek küldéséhez egy megadott szolgáltatás és hitelesítési adatok használatával.
9. Miért fontos a szerveroldali érvényesítés?
10. A szerveroldali ellenőrzés biztosítja, hogy a szerver által fogadott adatok érvényesek legyenek, megőrizve az adatok sértetlenségét és megvédve a rosszindulatú bemeneteket.

Utolsó gondolatok az űrlap érvényesítéséről és benyújtásáról

A React Hook Form és a Zod integrálása az űrlapok érvényesítéséhez a React alkalmazásokban javítja az adatok integritását és a felhasználói élményt. Az ügyféloldali érvényesítés és a Node.js és Express használatával történő kiszolgálóoldali feldolgozás kombinálásával robusztus megoldást hoz létre az űrlapbeküldések kezelésére. Ez a megközelítés biztosítja az adatok megfelelő érvényesítését és biztonságos feldolgozását, csökkentve a hibákat és javítva a megbízhatóságot. Ezeknek a gyakorlatoknak a megvalósítása jelentősen javíthatja webes űrlapjainak funkcionalitását és biztonságát.