JSX表单required属性失效：空输入仍可提交注册请求

以下是几个常见的原因和对应排查、解决步骤：

1. 提交按钮类型错误 #

检查提交按钮的type属性是否为submit：

// 正确写法，会触发原生表单验证
<button type="submit">注册</button>

// 错误写法，不会触发原生验证
<button type="button">注册</button>

若按钮是type="button"，点击时仅执行绑定的点击事件，不会触发表单原生验证逻辑。

2. 表单提交事件绕过原生验证 #

如果在表单onSubmit事件中直接调用e.preventDefault()后就执行提交逻辑，原生required验证不会触发，需要先手动检查表单有效性：

const handleSubmit = (e) => {
  e.preventDefault();
  // 先校验表单是否符合规则
  if (e.target.checkValidity()) {
    // 执行注册逻辑
    console.log('验证通过，提交数据');
  } else {
    // 弹出原生验证提示
    e.target.reportValidity();
  }
};

// 表单标签写法
<form onSubmit={handleSubmit}>
  <input type="text" required placeholder="用户名" />
  <button type="submit">注册</button>
</form>

checkValidity()会返回表单是否符合验证规则，reportValidity()会触发浏览器原生的验证提示框。

3. 输入框未包裹在form标签内 #

确保所有带required属性的输入框都在同一个<form>标签范围内，否则原生验证机制无法识别这些输入框的必填规则。

4. 受控组件状态干扰验证 #

如果是受控组件，检查输入框的value绑定是否正确：

const [username, setUsername] = useState('');

// 正确绑定，空字符串会触发required验证
<input 
  type="text" 
  required 
  value={username} 
  onChange={(e) => setUsername(e.target.value)} 
/>

避免将value绑定为undefined或null，部分浏览器对非字符串初始值的处理可能异常，导致required验证失效。

5. 自定义点击逻辑替代表单提交 #

若提交按钮绑定的是onClick事件、直接执行提交逻辑而非通过表单onSubmit，原生验证不会触发：

// 错误写法，绕过表单验证
<button type="button" onClick={() => { /* 直接执行提交 */ }}>注册</button>

// 正确写法，通过表单onSubmit触发验证
<form onSubmit={handleSubmit}>
  <button type="submit">注册</button>
</form>

你可以对照以上几点检查Register.jsx和App.jsx代码，大概率能定位问题。

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