02-u-form数组表单验证

参考地址:https://blog.csdn.net/weixin_46462541/article/details/120442602

修改u-form-item源码(uview)

// 在 props 属性中添加
target: {
  type: Object,
},

//修改validation方法
原:
this.fieldValue = this.parent.model[this.prop];
改为:
if (this.target) {
  this.fieldValue = this.target[this.prop];
} else {
  this.fieldValue = this.parent.model[this.prop];
}

页面代码

<u-form :model="form" ref="uForm" label-width="0">
  <template v-for="(item,index) in form.list">
    <u-form-item prop="tenant1" :target="item" required>
      <u-input v-model="item.tenant1" placeholder="请输入租客姓名"/>
    </u-form-item>
    <u-form-item prop="tenant2" :target="item" required>
      <u-input v-model="item.tenant2" placeholder="请输入租客身份证号"/>
    </u-form-item>
  </template>
</u-form>
<u-button type="primary" shape="circle" @click="submit" >提交</u-button>
rules:{
  tenant1:[
    { required: true,message: '请输入租客姓名',trigger: ['change','blur'] }
  ],
  tenant2:[
    { required: true,message: '请输入租客身份证号',trigger: ['change','blur'] },
    {
      validator: (rule, value, callback) => {
        return this.$u.test.idCard(value);
      },
      message: '身份证号不正确',
      trigger: ['change','blur'],
    }
  ],
}
onReady() {
  this.$refs.uForm.setRules(this.rules);
},
submit(){
  this.$refs.uForm.validate(valid => {
    console.log('form',this.form);
    if (valid) {
      console.log('验证通过');
    } else {
      console.log('验证失败');
    }
  });
},
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容