uniapp uview-plus 自定义动态验证
以前写的验证都是这样固定的
const rules = ref({ bedUnitTidy: [{ required: true, message: '请选择', trigger: 'change' }]})
单选按钮这些选项是从接口里读出来的数据,所以现在用了动态验证,现在记录下来供自己以后参考
<up-form 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>
</up-form>
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解决了问题,每天进步一点点,加油!!