使用weui Form表单,如何配置嵌套对象的数据验证?
发布于 5 年前 作者 hejuan 2606 次浏览 来自 官方Issues
        <view class="view-form">
            <mp-form id="form" rules="{{rules}}" models="{{activityData}}">
                   <mp-cells>
                        <mp-cell prop="activityData.expenseType.name" link="{{globalDisbale}}"  title="费用类型" value="{{activityData.expenseType.name}}" bindtap="{{globalDisbale ? 'findCostType':null}}"  ext-class="">
                        </mp-cell>
                   </mp-cells>
            </mp-form>
        </view>

js部分

    data: {
        activityData:{},
        rules: [{
            name'activityData.expenseType.name',
            rules: {
                required: true,
                message'请选择'
            },
        }],}

提交表单部分

    submitForm() {
        console.log("赋值后,在submitForm中打印"this.data.activityData) // 有值
        this.selectComponent('#form').validate((valid, errors) => {
            if (!valid) {
                console.log('valid', valid, errors)  //有值 依然打印了错误
             
            } else {
                // 提交
            }
        })
    },

按照上图的写法,无论是否设置数据,在提交时,都会触发validate((valid, errors) 的rules验证

请问使用weui Form表单做验证时,如何定义或者配置如上图这种对象嵌套对象的验证?

3 回复

你好,可以通过配置data-field的方式实现,我的文章里面有类似例子。

再查看源码后,确认组件不支持嵌套对象下面子对象的属性验证;

目前想到的两张方案:

1、使用多个表单嵌套来对应多个对象;如下图的方式

2、获取到fromData的对象数据,直接在提交表单时,自己实现一套可以验证嵌套对象的方法效验表单

算是结贴了,给后面遇到此问题的兄弟们一些思路,如果有其他的,比较好的思路请在评论区回复讨论

回到顶部