Integrer React Hook Form og Zod i eksisterende e-postfunksjon

Integrering av React Hook Form og Zod for e-postvalidering

Frontend: Reager med React Hook Form og 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;

Sette opp Backend for e-postsending

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

Ofte stilte spørsmål om integrering av React Hook Form og Zod

1. Hvordan integrerer jeg React Hook Form med Zod?
2. Bruk zodResolver-funksjonen fra @hookform/resolvers/zod-pakken for å koble Zod-validering med React Hook Form.
3. Hva er hensikten med renderToStaticMarkup?
4. renderToStaticMarkup konverterer React-komponenter til statiske HTML-strenger, som kan brukes til e-postinnhold eller andre statiske HTML-behov.
5. Hvordan kan jeg håndtere innsending av skjema med React Hook Form?
6. Bruk funksjonen handleSubmit fra React Hook Form for å administrere skjemainnsendinger og validere data før du behandler dem.
7. Hva gjør nodemailer.createTransport?
8. nodemailer.createTransport oppretter et transportobjekt for å sende e-poster ved å bruke en spesifisert tjeneste og autentiseringsdetaljer.
9. Hvorfor er validering på serversiden viktig?
10. Serversidevalidering sikrer at dataene som mottas av serveren er gyldige, opprettholder dataintegriteten og beskytter mot ondsinnede input.

Siste tanker om skjemavalidering og innsending

Å integrere React Hook Form og Zod for skjemavalidering i React-applikasjonene dine forbedrer dataintegriteten og brukeropplevelsen. Ved å kombinere klientsidevalidering med serversidebehandling ved bruk av Node.js og Express, skaper du en robust løsning for håndtering av skjemainnsendinger. Denne tilnærmingen sikrer at dataene er riktig validert og sikkert behandlet, noe som reduserer feil og forbedrer påliteligheten. Implementering av disse fremgangsmåtene kan forbedre funksjonaliteten og sikkerheten til nettskjemaene dine betydelig.