本文详解如何通过 validation 属性为 react-hook-form-mui 的表单组件（如 TextFieldElement）设置自定义验证错误消息，避免误用 register 导致规则失效。
本文详解如何通过 `validation` 属性为 react-hook-form-mui 的表单组件（如 `textfieldelement`）设置自定义验证错误消息，避免误用 `register` 导致规则失效。
react-hook-form-mui 是一个将 Material UI 组件与 react-hook-form 深度集成的封装库，其核心设计原则是以 Controller 为基础实现受控组件抽象，因此所有 MUI 封装组件（如 TextFieldElement、SelectElement 等）均不支持直接使用 useForm().register() 进行注册——这是与原生 react-hook-form 最关键的区别。
若强行解构 register 并传入 TextFieldElement（如 {...register("NAME", { required: "Error message" })}），不仅会导致验证规则被忽略（底层 Controller 会覆盖或忽略该配置），还会使错误消息始终回退至 react-hook-form 默认文案（如 "This field is required"），正如你所见：
{"NAME":{"type":"required","message":"This field is required","ref":{}}}
✅ 正确做法是：使用组件原生支持的 validation prop，它会自动透传至内部 Controller 的 rules 选项，从而生效自定义消息：
<textfieldelement name="NAME" label="Name" required validation="{{" required: sx="{{" width: classname="{styles.formField}"></textfieldelement>
? 提示：validation 接收与 register() 第二个参数完全相同的规则对象（支持 required, minLength, pattern, validate 等），且支持函数式校验：
validation={{ required: "必填项", minLength: { value: 2, message: "至少输入2个字符" }, validate: (v) => v.trim() !== "" || "不能全为空格" }}
此外，请确保已正确初始化 FormContainer（它内部调用 useForm 并提供上下文），且未在外部重复调用 useForm() —— 否则可能引发表单状态隔离问题。
? 总结要点：
- ❌ 不要对 TextFieldElement 使用 register 解构；
- ✅ 始终通过 validation prop 配置验证规则和错误消息；
- ✅ 错误消息支持字符串或返回字符串的函数（便于国际化）；
- ✅ 所有 react-hook-form-mui 表单元素均遵循此统一模式，无需额外学习成本。
这样即可精准控制每个字段的验证反馈，提升表单用户体验与可维护性。
