uni-forms 必须用 ref 定义表单数据并绑定 :model,name 与 key 严格一致;rules 需含 required 且 validator 必须显式返回;提交按钮须设 form-type="submit";动态更新需 clearValidate() 和 nextTick 配合。

uni-forms 绑定数据必须用 ref,不能直接用 data 响应式
uni-forms 不是 Vue 2 的 v-model 那套逻辑,它依赖 ref 创建的响应式对象来追踪字段状态。如果你在 data() 里定义表单数据,uni-forms 根本监听不到变化,验证状态永远不更新。
- 必须用
const form = ref({ username: '', password: '' })初始化,再传给:model="form" -
uni-forms-item的name必须和form.value的 key 完全一致(区分大小写) - 不要在
watch或onMounted里手动赋值给form.value后忘记触发校验,建议用formRef.validate()显式触发
rules 写法容易漏掉 required 和 validator 的返回值
uni-forms 的 rules 是对象数组,每个规则必须含 required: true/false,否则空值不会被判定为“未填写”;而且自定义 validator 函数必须显式 return true 或 return { message: 'xxx', valid: false },否则校验会卡住或静默失败。
-
required: true是独立开关,不写就等于“允许为空”,哪怕你写了validator -
validator里不能只写if (...) return { valid: false, message: '...' },缺了else return true就会中断后续规则执行 - 手机号验证别直接用正则
/^1[3-9]\d{9}$/,iOS 下某些输入法可能带空格或换行,建议先trim()
submit 事件不触发?检查 button type 和 form-type
uni-app 里 button 默认不是表单提交按钮,即使包在 uni-forms 里也无效。常见现象是点击没反应、控制台无报错、@submit 根本不执行。
- 必须写
<button form-type="submit">提交</button>,form-type是关键属性,不是type - 如果用了自定义组件封装按钮,它内部的
button必须透传form-type,否则失效 - H5 端支持原生
submit,但小程序端只认form-type="submit",跨端时别混用
uni-forms 在 onPullDownRefresh 或分页加载后验证失效
页面刷新或动态加载新表单项(比如切换 tab 后重置表单)时,uni-forms 内部缓存的字段状态不会自动同步,导致 validate() 返回 true 却实际有空字段。
- 每次重置表单,除了清空
form.value,还得调用formRef.clearValidate() - 动态增减字段(如地址列表)时,
rules要用计算属性实时生成,不能写死在 data 里 - App 端有时
clearValidate()不生效,可加个nextTick(() => formRef.clearValidate())确保时机
最麻烦的是 rules 里引用了闭包变量(比如从接口拿的配置),容易造成验证函数始终用旧值——这种得把依赖项放进 watch,手动重置 rule 对象。


















