uview 动态表单校验

最新推荐文章于 2024-04-07 18:10:21 发布

风落尘埃

最新推荐文章于 2024-04-07 18:10:21 发布

阅读量829

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/kathysnow/article/details/129186255

版权

<template>
  <view class="">
    <u-form :model="dongModel" ref="dongForm">
      <u-form-item v-for="(item,index) in dongData.dongList" :label="item.label" :prop="`dongList_${index}_value`">
        <u-input v-model="dongModel[`dongList_`+index+`_value`]" />
      </u-form-item>
    </u-form>
    <u-button @click="dongSubmit">提交</u-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dongModel: {

        },
        dongRules: {

        },
        dongData: {
          dongList: [],
        }
      };
    },
    onLoad() {
      this.getDongData();
    },
    methods: {
      getDongData() {
        let dongList = [];
        for (var i = 0; i < 5; i++) {
          dongList.push({
            label: "label" + i,
            value: undefined,
            nessary: i % 2 == 1
          })
        }
        this.dongData.dongList = dongList;
        this.disposalData();
      },
      disposalData() {
        let that = this;
        that.dongData.dongList.forEach((dong, index) => {
          that.$set(that.dongModel, `dongList_${index}_value`, null);
          if (dong.nessary) {
            that.$set(that.dongRules, `dongList_${index}_value`, [{
              required: true,
              message: '请输入姓名',
              trigger: ['blur', 'change']
            }])
          }
        })
        that.$nextTick(() => {
          that.$refs.dongForm.setRules(that.dongRules);
        })
      },
      dongSubmit() {
        let that = this;
        if (Object.keys(that.dongRules).length > 0) {
          that.$refs.dongForm.validate().then(res => {
            that.returnData();
          }).catch(errors => {
            console.log(errors)
            uni.$u.toast('校验失败')
          })
        } else {
          that.returnData();
        }
      },
      returnData() {
        let that = this;
        let dongModelData = Object.keys(that.dongModel);
        dongModelData.forEach(key => {
          let keys = key.split("_");
          let dataIndex = parseInt(keys[1]);
          that.dongData.dongList[dataIndex].value = that.dongModel[key];

        })
        console.log(that.dongData);
      }
    },
  };
</script>

<style>
</style>