Integruokite React Hook formą ir Zod į esamą el. pašto funkciją

„React Hook“ formos ir „Zod“ integravimas el. pašto patvirtinimui

Frontend: Reaguokite naudodami React Hook Form ir 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;

Pašto siuntimo užpakalinės programos nustatymas

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

Dažnai užduodami klausimai apie „React Hook Form“ ir „Zod“ integravimą

1. Kaip integruoti React Hook Form su Zod?
2. Naudokite zodResolver funkciją iš paketo @hookform/resolvers/zod, kad susietumėte Zod patvirtinimą su React Hook Form.
3. Koks yra renderToStaticMarkup tikslas?
4. renderToStaticMarkup konvertuoja React komponentus į statines HTML eilutes, kurias galima naudoti el. pašto turiniui ar kitiems statinio HTML poreikiams.
5. Kaip galiu tvarkyti formos pateikimą naudojant React Hook Form?
6. Naudokite funkciją handleSubmit iš React Hook Form, kad galėtumėte tvarkyti formos pateikimus ir patvirtinti duomenis prieš juos apdorojant.
7. Ką veikia nodemailer.createTransport?
8. nodemailer.createTransport sukuria transportavimo objektą el. laiškų siuntimui naudojant nurodytą paslaugą ir autentifikavimo informaciją.
9. Kodėl svarbus serverio patvirtinimas?
10. Serverio pusės patvirtinimas užtikrina, kad serverio gauti duomenys yra galiojantys, išlaikomas duomenų vientisumas ir apsaugota nuo kenkėjiškų įvesties.

Paskutinės mintys apie formos patvirtinimą ir pateikimą

„React Hook Form“ ir „Zod“ integravimas formų patvirtinimui jūsų „React“ programose pagerina duomenų vientisumą ir vartotojo patirtį. Derindami kliento patvirtinimą su serverio apdorojimu naudodami Node.js ir Express, sukuriate patikimą formų pateikimo tvarkymo sprendimą. Šis metodas užtikrina, kad duomenys būtų tinkamai patvirtinti ir saugiai apdorojami, sumažinant klaidų skaičių ir padidinant patikimumą. Šios praktikos įgyvendinimas gali žymiai pagerinti žiniatinklio formų funkcionalumą ir saugumą.