uniapp uview-plus 自定义动态验证

lizi662026-03-26 11:02

以前写的验证都是这样固定的

const rules = ref({ bedUnitTidy: [{ required: true, message: '请选择', trigger: 'change' }]})

单选按钮这些选项是从接口里读出来的数据，所以现在用了动态验证，现在记录下来供自己以后参考

js 复制代码

<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解决了问题，每天进步一点点，加油！！