React表单验证求助：如何校验所有表单字段是否已全部填写

实现步骤 #

• 第一步：统一字段命名
  你当前状态中存储消息的key是msg，但textarea的name属性是message，字段不匹配会导致值无法同步到状态，建议统一修改，比如把状态中的msg改为message：

const [fields, setFields] = useState({
    name: '',
    email: '',
    subject: '',
    message: '', // 这里和textarea的name保持一致
});

• 第二步：绑定输入事件同步状态
  写一个通用的change处理函数，给所有输入框、文本框绑定该事件，实现输入内容实时同步到fields状态，多余的refs='name'属性可以直接删除：

const handleChange = (e) => {
  const { name, value } = e.target;
  setFields(prev => ({
    ...prev,
    [name]: value
  }))
}

之后给所有<input>、<textarea>标签都加上onChange={handleChange}属性即可。

• 第三步：提交前新增非空校验逻辑
  修改handleSubmit函数，首先阻止表单默认提交行为，再校验所有字段是否都已填写，校验不通过直接终止提交逻辑：

const handleSubmit = (event) => {
    // 阻止默认提交行为放在最前面，避免页面刷新
    event.preventDefault();
    // 非空校验：自动排除字段前后空格的影响
    const isAllFilled = Object.values(fields).every(val => val.trim() !== '')
    if (!isAllFilled) {
      alert('请填写所有必填字段后再提交')
      return
    }
    // 校验通过再走提交逻辑，注意emailjs.sendForm需要补传serviceID、templateID、表单DOM、公钥参数
    emailjs.sendForm(/* 你的对应参数 */).then(
        (result) => {
            console.log(result.text);
            alert('表单提交成功');
            // 提交成功后同时重置表单DOM和状态数据
            event.target.reset();
            setFields({
              name: '',
              email: '',
              subject: '',
              message: '',
            })
        },
        (error) => {
            console.log(error.text);
            alert('表单提交失败，请稍后重试')
        }
    );
};

可选优化 #

如果需要更友好的交互，可以单独新增错误状态存储每个字段的报错信息，提交时校验对应字段为空就在对应输入框下方展示专属提示，替代全局alert弹窗。

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