如何为使用FormSpree的联系表单添加空/无效输入校验条件

Formspree React SDK 默认不内置客户端字段校验逻辑，官方示例仅处理服务端返回的校验错误，因此未做额外配置时空字段会正常发起提交请求。

方案1：原生HTML校验（零额外代码，推荐优先使用） #

直接给需要必填的表单字段加上required属性即可，浏览器会在提交前自动拦截空值、格式不符合要求的请求，空数据根本不会发送到Formspree服务端，不需要编写额外的校验逻辑。
修改后的核心表单代码如下：

<form onSubmit={handleSubmit}>
  <label htmlFor="email">
    Email Address
  </label>
  <input
    id="email"
    type="email" 
    name="email"
    required // 新增必填属性
  />
  <ValidationError 
    prefix="Email" 
    field="email"
    errors={state.errors}
  />
  <textarea
    id="message"
    name="message"
    required // 新增必填属性
  />
  <ValidationError 
    prefix="Message" 
    field="message"
    errors={state.errors}
  />
  <button type="submit" disabled={state.submitting}>
    Submit
  </button>
</form>

这种方案兼容性最好，不需要引入额外的表单校验库，浏览器会自动弹出默认提示引导用户补全字段。

方案2：自定义客户端校验（适合定制化提示场景） #

如果你不想使用浏览器默认的提示样式，或者需要实现更复杂的校验规则，可以自己封装一层提交逻辑，在调用Formspree提供的handleSubmit方法前先完成本地校验，校验不通过就直接阻断提交。
完整示例代码：

import React, { useState } from 'react';
import { useForm, ValidationError } from '@formspree/react';

function ContactForm() {
  const [state, handleSubmit] = useForm("YOUR_FORMSPREE_UNIQUE_KEY");
  const [clientErrors, setClientErrors] = useState({});

  if (state.succeeded) {
      return <p>Thanks for joining!</p>;
  }

  // 自定义校验规则
  const validate = (formData) => {
    const errors = {};
    const email = formData.get('email')?.trim();
    const message = formData.get('message')?.trim();

    if (!email) {
      errors.email = '邮箱地址不能为空';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      errors.email = '请输入有效的邮箱格式';
    }

    if (!message) {
      errors.message = '留言内容不能为空';
    }

    return errors;
  }

  const customSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const errors = validate(formData);
    setClientErrors(errors);

    // 校验无错误才触发Formspree提交
    if (Object.keys(errors).length === 0) {
      handleSubmit(e);
    }
  }

  return (
      <form onSubmit={customSubmit}>
      <label htmlFor="email">
        Email Address
      </label>
      <input
        id="email"
        type="email" 
        name="email"
      />
      {clientErrors.email && <p className="error-text">{clientErrors.email}</p>}
      <ValidationError 
        prefix="Email" 
        field="email"
        errors={state.errors}
      />
      <textarea
        id="message"
        name="message"
      />
      {clientErrors.message && <p className="error-text">{clientErrors.message}</p>}
      <ValidationError 
        prefix="Message" 
        field="message"
        errors={state.errors}
      />
      <button type="submit" disabled={state.submitting}>
        Submit
      </button>
    </form>
  );
}

function App() {
  return <ContactForm />;
}
export default App;

补充建议：可以在Formspree后台的对应表单设置中配置服务端字段必填规则，就算极端情况下客户端校验被绕过，服务端也会拦截空字段提交，形成双层校验保障。

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