如何在React中使用浏览器表单验证且不阻塞提交Handler执行

问题原因 #

你遇到的是原生HTML表单的默认行为，和React、按钮是否在表单外都没有关系：默认情况下浏览器在触发表单提交事件前，会先执行内置的字段校验逻辑，如果有字段未通过校验，会直接拦截提交事件（你绑定的onSubmit回调不会被触发），同时弹出浏览器默认的校验提示气泡。

实现方案 #

要满足你提出的三个需求，只需要两步调整：

• 给<form>标签添加novalidate属性：该属性会禁用浏览器默认的校验拦截和气泡提示，但不会影响原生校验规则的判断能力，你仍然可以调用浏览器提供的API获取校验结果
• 在onSubmit回调中手动调用表单的checkValidity()方法获取校验结果，自定义后续的错误展示或提交逻辑

调整后的完整代码 #

JSX部分修改如下，CSS、HTML部分无需变动：

const App = () => {
  const [value, setValue] = React.useState("");
  const [result, setResult] = React.useState("");

  const onSubmit = (e) => {
    e.preventDefault();
    // 手动触发表单原生校验，获取校验结果
    const isFormValid = e.target.checkValidity();
    if (!isFormValid) {
      setResult("Error");
      // 如果需要细分字段错误，可以通过 e.target.elements 访问各个输入框的validity属性
      // 示例：const inputValidity = e.target.elements[0].validity
      return;
    }
    setResult(value);
  };

  return (
    <div className="box">
      {/* 添加novalidate属性，禁用默认校验拦截和气泡 */}
      <form id="myform" className="box" onSubmit={onSubmit} novalidate>
        <h3>My form</h3>
        <input
          className="input"
          value={value}
          required
          onChange={(e) => setValue(e.target.value)}
        />
      </form>
      <button type="submit" form="myform" className="button">
        Submit
      </button>
      <div>Result: {result}</div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

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