دمج نموذج React Hook وZod في وظيفة البريد الإلكتروني الموجودة

دمج نموذج React Hook وZod للتحقق من صحة البريد الإلكتروني

الواجهة الأمامية: التفاعل باستخدام نموذج React Hook و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;

إعداد الواجهة الخلفية لإرسال البريد الإلكتروني

الواجهة الخلفية: 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 و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، يمكنك إنشاء حل قوي للتعامل مع عمليات إرسال النماذج. ويضمن هذا النهج التحقق من صحة البيانات بشكل صحيح ومعالجتها بشكل آمن، مما يقلل الأخطاء ويحسن الموثوقية. يمكن أن يؤدي تنفيذ هذه الممارسات إلى تحسين وظائف وأمان نماذج الويب الخاصة بك بشكل كبير.