React中如何触发checkbox必填校验提示（非提交按钮触发）

问题描述 #

在React项目中，给checkbox添加required属性后，只有点击type="submit"按钮才会触发浏览器默认的必填校验提示（提示为浏览器原生的气泡样式，内容类似“请勾选此复选框”）。现在需要实现在任意时机（比如点击其他非submit按钮时）也能触发该校验提示。

相关代码如下：

<input
  id="conditions"
  type="checkbox"
  name="conditions"
  ref={acceptConditions}
  required
></input>

实现方法 #

利用浏览器原生的表单元素API，结合React的ref即可实现手动触发校验：

• 核心API：reportValidity()：该方法会直接触发浏览器的默认校验流程，若元素不符合校验规则，会弹出和点击submit按钮完全一致的校验提示气泡。
• 可选API：checkValidity()：仅返回布尔值表示是否通过校验，不会显示提示，适合需要自定义提示逻辑的场景；如果要复用浏览器默认提示，优先用reportValidity()。

具体代码示例 #

假设需要点击一个普通按钮时触发校验：

import { useRef } from 'react';

function App() {
  const acceptConditions = useRef(null);

  const triggerCheck = () => {
    // 触发校验提示
    acceptConditions.current?.reportValidity();
  };

  return (
    <div>
      <input
        id="conditions"
        type="checkbox"
        name="conditions"
        ref={acceptConditions}
        required
      />
      <label htmlFor="conditions">同意服务条款</label>
      <button type="button" onClick={triggerCheck}>
        点击触发校验
      </button>
    </div>
  );
}

export default App;

补充说明 #

只要能通过ref获取到checkbox的DOM元素，就可以在任意时机调用reportValidity()：比如组件挂载完成、表单其他字段变化、自定义按钮点击等场景都适用。

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