Integrirajte React Hook Form in Zod v obstoječo e-poštno funkcijo

Integracija obrazca React Hook in Zod za preverjanje e-pošte

Frontend: React z React Hook Form in Zodom

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;

Nastavitev ozadja za pošiljanje e-pošte

Zaledje: Node.js z Expressom

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

Pogosto zastavljena vprašanja o integraciji React Hook Form in Zoda

1. Kako integriram React Hook Form z Zod?
2. Uporabite funkcijo zodResolver iz paketa @hookform/resolvers/zod za povezavo validacije Zod z React Hook Form.
3. Kaj je namen renderToStaticMarkup?
4. renderToStaticMarkup pretvori komponente React v statične nize HTML, ki se lahko uporabljajo za vsebino e-pošte ali druge potrebe statičnega HTML.
5. Kako lahko obravnavam oddajo obrazca z React Hook Form?
6. Uporabite funkcijo handleSubmit iz React Hook Form za upravljanje oddaje obrazcev in preverjanje podatkov pred obdelavo.
7. Kaj počne nodemailer.createTransport?
8. nodemailer.createTransport ustvari transportni objekt za pošiljanje e-pošte z uporabo določene storitve in podrobnosti za preverjanje pristnosti.
9. Zakaj je preverjanje na strani strežnika pomembno?
10. Preverjanje na strani strežnika zagotavlja, da so podatki, ki jih prejme strežnik, veljavni, ohranja celovitost podatkov in ščiti pred zlonamernimi vnosi.

Končne misli o preverjanju obrazca in predložitvi

Integracija React Hook Form in Zod za preverjanje obrazcev v vaših aplikacijah React izboljša celovitost podatkov in uporabniško izkušnjo. S kombinacijo preverjanja veljavnosti na strani odjemalca z obdelavo na strani strežnika z uporabo Node.js in Express ustvarite robustno rešitev za obravnavanje predložitev obrazcev. Ta pristop zagotavlja, da so podatki pravilno potrjeni in varno obdelani, kar zmanjšuje napake in izboljšuje zanesljivost. Izvajanje teh praks lahko bistveno izboljša funkcionalnost in varnost vaših spletnih obrazcev.