uni-forms 的 errorMessage 不自动显示,首要检查 name、rules 键名与 v-model 路径是否逐字符一致;微信小程序需手动插入 error 提示;validateFunction 与 :rules 不可混用;异步校验须返回 Promise;错误提示需自主过滤与控制渲染。

uni-forms 的 errorMessage 不自动显示?先检查 name 和 rules 键名是否完全一致
这是最常被忽略的根源:uni-forms-item 的 name 属性、rules 对象的字段键名、以及 v-model 绑定的 data 路径,三者必须**逐字符相同**,包括大小写和嵌套层级。任意一处不一致,校验失败时 errorMessage 就不会触发渲染。
常见错误示例:
-
name="mobile",但rules里写的是phone: [...] -
v-model="formData.mobile",但rules写成mobile: [...],而实际 data 结构是{ user: { mobile: '' } },却没把v-model改成user.mobile - 微信小程序真机下,
errorMessage不会自动插入 DOM,必须手动加<text class="error">{{ errors.mobile }}</text>并监听@validate事件更新errors对象
validate() 返回 true 却后端拒收?说明校验逻辑没覆盖真实依赖
uni-forms 的 rules 是静态批量触发,无法响应字段间联动。比如「确认密码」必须实时比对「密码」值,但 rules.confirmPassword 里用 validator 函数时,this 是 undefined,拿不到 formData.password。
正确做法是下沉到方法层:
- 用
watch监听formData.password变化,手动调用this.$refs.formRef.validateField('confirmPassword') - 自定义
validator函数必须通过闭包或参数传入上下文,例如:validator: (v) => v === passwordValue,其中passwordValue来自外部变量或计算属性 - 异步校验(如用户名查重)必须返回
Promise,且validateField()才会等待完成;直接在rules里写同步逻辑,会导致提交时跳过异步校验
想用 validateFunction 却不执行?别混用 :rules 和 setRules
一旦用了 validateFunction,就**不能**再通过 :rules 属性绑定规则。uni-forms 内部会优先处理 :rules 静态配置,导致 setRules() 设置的含函数规则被忽略。
必须全部走动态设置:
- 移除模板中
:rules="xxx"这一行 - 在
onReady中调用this.$refs.formRef.setRules(dynamicRules) - 如果表单在
uni-popup里,且用v-if控制显隐,onReady时 DOM 可能未挂载——改用v-show,或等 popup 显示后再调用setRules -
validateFunction的第四个参数callback必须显式调用:callback()表示通过,callback('错误提示')表示失败;不调用则校验永远挂起
错误提示要过滤或定制?别依赖插件自动渲染
uni-validate-prompt 等第三方校验器不操作 DOM,只返回错误对象。所谓“提示过滤”,本质是你自己控制哪些错误展示、何时展示、怎么展示。
实操建议:
- 校验后拿到
{ valid, errors },遍历errors对象,按字段名映射到对应 UI 元素的errorMessage属性 - 对某些字段(如「验证码」),可设为仅在提交时校验,避免输入过程频繁报错;用
trigger: 'submit'控制触发时机 - 若需统一过滤掉某类提示(如空字段的 required 提示),可在收集
errors后做条件筛除:Object.fromEntries(Object.entries(errors).filter(([k, v]) => v && k !== 'captcha')) - 注意:微信小程序下
errorMessage是纯文本,不支持 HTML 或组件嵌套;APP 和 H5 端则可配合uni-easyinput的error-message插槽做更灵活渲染
真正难的不是写校验逻辑,而是让每个字段的验证状态、错误消息、UI 反馈、用户操作节奏全部对齐。尤其在跨端场景下,微信小程序的 DOM 渲染限制、APP 端的生命周期差异、H5 的 SSR 兼容性,会让同一套规则表现不一。动手前先明确:这个提示,到底是要给用户看,还是给后端看,还是给调试用——目标不同,实现路径就完全不同。


















