Integrasikan Borang React Hook dan Zod ke dalam Fungsi E-mel Sedia Ada

Mengintegrasikan Borang React Hook dan Zod untuk Pengesahan E-mel

Bahagian Hadapan: React dengan React Hook Form dan 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;

Menyediakan Bahagian Belakang untuk Penghantaran E-mel

Bahagian Belakang: Node.js dengan 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');
});

Soalan Lazim tentang Mengintegrasikan React Hook Form dan Zod

1. Bagaimanakah cara saya mengintegrasikan Borang Cangkuk Reaksi dengan Zod?
2. Gunakan fungsi zodResolver daripada pakej @hookform/resolvers/zod untuk menyambungkan pengesahan Zod dengan React Hook Form.
3. Apakah tujuan renderToStaticMarkup?
4. renderToStaticMarkup menukar komponen React kepada rentetan HTML statik, yang boleh digunakan untuk kandungan e-mel atau keperluan HTML statik lain.
5. Bagaimanakah saya boleh mengendalikan penyerahan borang dengan Borang React Hook?
6. Gunakan fungsi handleSubmit daripada React Hook Form untuk mengurus penyerahan borang dan mengesahkan data sebelum memprosesnya.
7. Apakah yang dilakukan oleh nodemailer.createTransport?
8. nodemailer.createTransport mencipta objek pengangkutan untuk menghantar e-mel menggunakan perkhidmatan tertentu dan butiran pengesahan.
9. Mengapakah pengesahan bahagian pelayan penting?
10. Pengesahan bahagian pelayan memastikan bahawa data yang diterima oleh pelayan adalah sah, mengekalkan integriti data dan melindungi daripada input berniat jahat.

Pemikiran Akhir tentang Pengesahan dan Penyerahan Borang

Mengintegrasikan React Hook Form dan Zod untuk pengesahan borang dalam aplikasi React anda meningkatkan integriti data dan pengalaman pengguna. Dengan menggabungkan pengesahan pihak klien dengan pemprosesan sebelah pelayan menggunakan Node.js dan Express, anda mencipta penyelesaian yang mantap untuk mengendalikan penyerahan borang. Pendekatan ini memastikan bahawa data disahkan dengan betul dan diproses dengan selamat, mengurangkan ralat dan meningkatkan kebolehpercayaan. Melaksanakan amalan ini boleh meningkatkan fungsi dan keselamatan borang web anda dengan ketara.