收藏
回答

使用weui Form表单,如何配置嵌套对象的数据验证?

        <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表单做验证时,如何定义或者配置如上图这种对象嵌套对象的验证?

最后一次编辑于  2021-11-25
回答关注问题邀请回答
收藏

2 个回答

  • 没事
    没事
    发表于小程序端
    2021-11-25

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

    2021-11-25
    有用 1
    回复 8
    • 嘉蓬
      嘉蓬
      2021-11-25
      你好,你的帖子早上已经看过了,并已经收藏。
      我的问题并不是没有赋值到formData。我在赋值之后,依然触发了表单验证的错误接口;
      如下图的逻辑
      2021-11-25
      回复
    • 没事
      没事
      发表于小程序端
      2021-11-25回复嘉蓬

      你好,可以私聊发我这一块的代码截图吗?

      2021-11-25
      回复
    • 没事
      没事
      发表于小程序端
      2021-11-25回复嘉蓬

      你把mp-cell放在mp-cells里面试试?

      2021-11-25
      回复
    • 嘉蓬
      嘉蓬
      2021-11-25回复没事
      放在mp-cells中已经试过了,我已经将代码贴在了问题上面,请你帮忙看看
      2021-11-25
      回复
    • 没事
      没事
      发表于小程序端
      2021-11-25回复嘉蓬

      prop那里去掉activityData.试试?

      2021-11-25
      回复
    查看更多(3)
  • 嘉蓬
    嘉蓬
    2021-11-26

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

    目前想到的两张方案:

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

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




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

    2021-11-26
    有用
    回复
登录 后发表内容