Integrera React Hook Form och Zod i befintlig e-postfunktion

Integrering av React Hook Form och Zod för e-postvalidering

Frontend: Reagera med React Hook Form och 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;

Ställa in backend för e-postsändning

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

Vanliga frågor om att integrera React Hook Form och Zod

1. Hur integrerar jag React Hook Form med Zod?
2. Använd zodResolver-funktionen från paketet @hookform/resolvers/zod för att koppla Zod-validering med React Hook Form.
3. Vad är syftet med renderToStaticMarkup?
4. renderToStaticMarkup konverterar React-komponenter till statiska HTML-strängar, som kan användas för e-postinnehåll eller andra statiska HTML-behov.
5. Hur kan jag hantera formulärinlämning med React Hook Form?
6. Använd funktionen handleSubmit från React Hook Form för att hantera formulärinlämningar och validera data innan du bearbetar den.
7. Vad gör nodemailer.createTransport?
8. nodemailer.createTransport skapar ett transportobjekt för att skicka e-post med en specificerad tjänst och autentiseringsdetaljer.
9. Varför är validering på serversidan viktig?
10. Verifiering på serversidan säkerställer att data som tas emot av servern är giltig, upprätthåller dataintegriteten och skyddar mot skadlig indata.

Slutliga tankar om formulärvalidering och inlämning

Att integrera React Hook Form och Zod för formulärvalidering i dina React-applikationer förbättrar dataintegriteten och användarupplevelsen. Genom att kombinera validering på klientsidan med bearbetning på serversidan med Node.js och Express skapar du en robust lösning för hantering av formulärinlämningar. Detta tillvägagångssätt säkerställer att data är korrekt validerade och säkert behandlade, vilket minskar fel och förbättrar tillförlitligheten. Genom att implementera dessa metoder kan du avsevärt förbättra funktionaliteten och säkerheten för dina webbformulär.