当数据格式无法绑定到form表单如何触发校验

能绑定的格式:

let a = {
	a:1,
	b:1
}
<t-form :data="a"/>

不能绑定的格式得手动写循环

let a = [
{a;1,b:1},
{a:1,b:1}
]
<t-form>
	<t-form-item v-for....>
<t-form/>

这种时候如何触发校验

<t-form>
                <!-- h5自定义属性 data-validate 必填且未填写 -->
                <t-form-item
                	class="subFormItem"
                  v-for="(formItem, formIndex) in list"
                  :key="formIndex"
                  :data-validate="!formItem.value? 'validate-error' : ''"
                  :label="formItem.argName"
                >
<t-form/>

 validateAllForm() {
      // 寻找所有的form-item表单,形成它们的dom集合
      const mainForm = this.$refs.mainForm;
      const subFormItemList = mainForm.getElementsByClassName('subFormItem');
      // 遍历集合,根据dom上的自定义HTML参数判断是否必填且未填写,如果是,则根据dom找vue实例,触发validate显示
      let bol = true;
      for (const item of subFormItemList) {
        if (item.dataset.validate === 'validate-error') {
          item?.__vue__?.setValidateMessage([{ type: 'error', message: '请输入' }]);
          bol = false;
        }
      }
      return bol;
    },

使用html的自定义dom参数,:data-xxxx,item.dataset.xxxx
使用form-item实例中的方法setValidateMessage

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值