Integroi React Hook Form ja Zod olemassa olevaan sähköpostitoimintoon

Integroi React Hook Form ja Zod sähköpostin vahvistamiseen

Käyttöliittymä: Reagoi React Hook Formilla ja Zodilla

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;

Taustaohjelman määrittäminen sähköpostin lähettämistä varten

Taustajärjestelmä: Node.js Expressillä

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

Usein kysyttyjä kysymyksiä React Hook Formin ja Zodin integroimisesta

1. Kuinka yhdistän React Hook Form -lomakkeen Zodin kanssa?
2. Käytä zodResolver-toimintoa @hookform/resolvers/zod-paketista yhdistääksesi Zod-vahvistuksen React Hook Form -lomakkeeseen.
3. Mikä on renderToStaticMarkupin tarkoitus?
4. renderToStaticMarkup muuntaa React-komponentit staattisiksi HTML-merkkijonoiksi, joita voidaan käyttää sähköpostin sisältöön tai muihin staattisiin HTML-tarpeisiin.
5. Kuinka voin käsitellä lomakkeiden lähettämistä React Hook Form -lomakkeella?
6. Käytä React Hook Form -sovelluksen handleSubmit-toimintoa lomakelähetysten hallintaan ja tietojen vahvistamiseen ennen niiden käsittelyä.
7. Mitä nodemailer.createTransport tekee?
8. nodemailer.createTransport luo siirtoobjektin sähköpostien lähettämiseksi tiettyä palvelua ja todennustietoja käyttämällä.
9. Miksi palvelinpuolen vahvistus on tärkeää?
10. Palvelinpuolen vahvistus varmistaa, että palvelimen vastaanottamat tiedot ovat kelvollisia, säilyttäen tietojen eheyden ja suojaten haitallisilta syötteiltä.

Lopullisia ajatuksia lomakkeiden vahvistamisesta ja lähettämisestä

React Hook Formin ja Zodin integrointi lomakkeen validointiin React-sovelluksissa parantaa tietojen eheyttä ja käyttökokemusta. Yhdistämällä asiakaspuolen vahvistuksen palvelinpuolen käsittelyyn Node.js:n ja Expressin avulla luot vankan ratkaisun lomakelähetysten käsittelyyn. Tämä lähestymistapa varmistaa, että tiedot validoidaan oikein ja käsitellään turvallisesti, mikä vähentää virheitä ja parantaa luotettavuutta. Näiden käytäntöjen käyttöönotto voi parantaa merkittävästi verkkolomakkeiden toimivuutta ja turvallisuutta.