如何在React JS中为基于EmailJS的联系表单实现表单校验功能

你现在用的是React函数式组件，只需要把旧版类组件里的校验逻辑适配成Hook写法接入即可，改造后的完整代码如下：

import { useState } from 'react';
import emailjs from '@emailjs/browser';

const initialState = {
  name: '',
  email: '',
  message: '',
  sent: false,
  nameError: '',
  emailError: '',
  messageError: '',
};

const Form = () => {
  const [formState, setFormState] = useState(initialState);

  // 表单输入同步
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormState(prev => ({
      ...prev,
      [name === 'user_email' ? 'email' : name]: value,
      // 输入时清除对应字段的错误提示
      [`${name === 'user_email' ? 'email' : name}Error`]: ''
    }));
  };

  // 直接复用旧版校验规则，去掉了新表单没有的subject字段校验
  const validate = () => {
    let nameError = '';
    let emailError = '';
    let messageError = '';

    if (!formState.name) {
      nameError = '姓名不能为空';
    }
    if (formState.message.length < 5) {
      messageError = '消息内容不能少于5个字符';
    }
    if (!formState.email) {
      emailError = '邮箱不能为空';
    } else {
      const mailformat = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (!mailformat.test(formState.email)) {
        emailError = '邮箱格式不正确';
      }
    }

    if (emailError || nameError || messageError) {
      setFormState(prev => ({ ...prev, emailError, nameError, messageError }));
      return false;
    }
    return true;
  };

  // 重置表单逻辑
  const resetForm = () => {
    setFormState(initialState);
    setTimeout(() => {
      setFormState(prev => ({ ...prev, sent: false }));
    }, 3000);
  };

  function sendEmail(e) {
    e.preventDefault();
    // 提交前先校验，不通过直接终止提交
    const isValid = validate();
    if (!isValid) return;

    emailjs
      .sendForm(
        'servxxxxxxxxxu',
        'tempxxxxxxxxxxxxa',
        e.target,
        'userxxxxxxxxxxxxxxxxxxxx'
      )
      .then((res) => {
        console.log(res);
        setFormState(prev => ({ ...prev, sent: true }));
        resetForm();
      })
      .catch((err) => console.log(err));
  }
  return (
    <div className="Contact">
      <div className="wrapper">
        <h1>Contact Form</h1>
        {/* 发送成功提示 */}
        {formState.sent && <p style={{color: 'green'}}>消息发送成功！</p>}
        <form onSubmit={sendEmail}>
          <input
            className="input-field"
            type="text"
            name="name"
            placeholder="Name"
            value={formState.name}
            onChange={handleChange}
          />
          {/* 姓名错误提示 */}
          {formState.nameError && <p style={{color: 'red', fontSize: '12px', margin: '2px 0 10px 0'}}>{formState.nameError}</p>}

          <input
            className="input-field"
            type="text"
            name="user_email"
            placeholder="E-Mail"
            value={formState.email}
            onChange={handleChange}
          />
          {/* 邮箱错误提示 */}
          {formState.emailError && <p style={{color: 'red', fontSize: '12px', margin: '2px 0 10px 0'}}>{formState.emailError}</p>}

          <textarea 
            name="message" 
            rows="4" 
            placeholder="Message"
            value={formState.message}
            onChange={handleChange}
          />
          {/* 消息错误提示 */}
          {formState.messageError && <p style={{color: 'red', fontSize: '12px', margin: '2px 0 10px 0'}}>{formState.messageError}</p>}
          <input type="submit" value="Send" />
        </form>
      </div>
    </div>
  );
};
export default Form;

主要改动说明：

• 用useState存储表单值、错误信息和提交状态，完全复用你原有校验逻辑无需调整规则
• 每个输入控件新增onChange事件同步输入内容，输入时自动清除对应字段的错误提示
• 提交方法最前置入校验逻辑，校验不通过不会触发emailjs的发送请求
• 表单内新增了错误提示和发送成功提示的展示，可根据自己的设计需求调整样式

内容的提问来源于stack exchange，提问作者jesuismert