Form Validation 表单校验
最后更新：2026-10-28
Form Validation 表单校验
校验的本质是「从 state 推导错误」：用校验函数算出 errors 对象，提交前整体检查一遍，有错误就阻止提交并渲染提示。错误信息也是 UI，交给条件渲染即可，无需命令式操作 DOM。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const errors = validate(values) // 从 state 推导错误
const hasError = Object.keys(errors).length > 0
<form onSubmit={e => {
e.preventDefault() // 阻止浏览器默认提交
if (!hasError) submit(values)
}}>返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
邮箱缺 @ 或密码不足 6 位时，点「注册」在对应输入框下显示红色错误；两项都合法后显示「注册成功」。💡 要点
💡 提示 先触碰后提示：用 touched/submitted 标记控制错误显示时机，避免用户一进来就满屏红字。
ℹ️ 说明 errors 应在渲染期从 state 推导，而不是用 setState 存错误——推导保证永远和输入同步。
⚠️ 注意 忘记 preventDefault 会导致表单触发浏览器原生提交、整页刷新，错误提示一闪而过。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 校验放 onChange 还是 onSubmit？
A 关键校验（格式）放提交时统一做，友好提示（实时可用性）可放 onChange 或 onBlur，两者不冲突。
Q 错误信息要存进 state 吗？
A 不建议。错误是 state 的推导结果，渲染时现算即可；存成 state 反而可能和输入不同步。
Q 提交后错误不显示是怎么回事？
A 常见原因：onSubmit 忘了 e.preventDefault()，页面被原生提交刷新；或错误展示条件依赖的标记没设置。
