uniapp uview-plus 自定义动态验证
作者:互联网
2026-03-28
以前写的验证都是这样固定的
const rules = ref({ bedUnitTidy: [{ required: true, message: '请选择', trigger: 'change' }]})
单选按钮这些选项是从接口里读出来的数据,所以现在用了动态验证,现在记录下来供自己以后参考
class="p24 bgf" :model="form" :rules="rules" ref="uFormRef" labelWidth="200" labelPosition="top":borderBottom="true">
<up-form-item v-for="(item,index) in recordData" :key="index" :label="item.text"
:prop="`inspectionItems.${item.value}`" required
:rules="[{ required: true, message: '请选择' + item.text, trigger: 'change' }]">
<up-radio-group v-model="form.inspectionItems[item.value]">
<up-radio label="是" name="1">
up-radio>
<up-radio label="否" name="0">
up-radio>
up-radio-group>
up-form-item>
const submitForm = () => {
uFormRef.value.validate().then(res => {
console.log(res, '成功');
handleSubmit()
}).catch(err => {
console.log(err, '校验失败');
})
}
之前一直验证失败是prop路径写错,现在查资料总结到:v-model 绑哪里
prop 就写哪里的完整路径,验证是form表单,所有项应该在form里,之前问题是在于,prop绑定的循环体里的数据,现在通过重组数据,拿到数据项后,放到form对象里,然后在up-form-item 上绑定rules 和prop解决了问题,每天进步一点点,加油!!
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
最新版vue3+TypeScript开发入门到实战教程之路由详解二
03/28
src-components调用链与即时聊天组件树
03/28
从0开始设计一个树和扁平数组的双向同步方案
03/28
拒绝 rem 计算!Vue3 大屏适配,我用 vfit 一行代码搞定
03/28
Home双router-view与布局切换逻辑
03/28
uniapp uview-plus 自定义动态验证
03/28
Vue3 单元测试实战:从组合式函数到组件
03/28
VUE-组件命名与注册机制
03/28
VTJ.PRO 在线应用开发平台概览
03/28
v0.dev 支持 RSC 了!AI 生成全栈组件离我们还有多远?
03/28
AI精选
