普通视图

发现新文章,点击刷新页面。
昨天 — 2026年3月26日首页

uniapp uview-plus 自定义动态验证

作者 lizi66
2026年3月26日 10:23

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

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解决了问题,每天进步一点点,加油!! image.png

❌
❌