Vue 引入组件内的循环生成多个表单的验证

Vue 引入组件内的循环生成多个表单的验证

子组件~1

<template>
  <section>
    <el-form
      ref="domainGroup"
      :model="item"
      :rules="rules"
      label-position="left"
      label-width="200px">
      <el-form-item :label="域名'+(index+1)" prop="keywordArray">
        <el-input type="textarea" :rows="3" :placeholder="placeholderText"  v-model="item.keywordArray"></el-input>
        <el-button @click="deleteP" icon="el-icon-delete" size="mini" type="primary" plain></el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

子组件~2

<script>
export default {
  name:'domain',
  props: {
    item: {
      type: Object,
      default() {
        return {
          keywordArray: ''
        }
      }
    },
    index: {
      type: Number,
      required: true
    },
  },
  data() {
    var validTextarea = (rule, value, callback) => {
      // 域名的验证：
      // 1.为空提示 请填写域名
      // 2.不为空 要以;分割 然后每一个验证 以*开头的单个IP验证 
      // 3.判断分隔符为;
      var pattern = /^\*((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/
      var urlReg = /^\*((https|http|ftp|rtsp|mms){0,1}(:\/\/){0,1})www\.(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/i
      if (value === '') {
        callback(new Error('请填写域名'))
      } else {
        var arr = value.split(';')
        var result = []
        for (var i in arr) {
          result.push(pattern.test(arr[i]) || urlReg.test(arr[i]))
        }
        if(result.indexOf(false) != -1) {
          callback(new Error('IP或域名请以*开头，多个IP及域名以(;)分隔 eg:*1.1.1.1;*www.baidu.com'))
        } else {
          callback()
        }
      }
    }
    return {
      placeholderText:"IP或域名请以*开头，多个IP及域名以(;)分隔\neg:*1.1.1.1;*www.baidu.com",
      item:{
        keywordArray: ''
      },
      rules:{
        keywordArray:[{ validator: validTextarea, trigger: 'blur', required:true }]
      }
    }
  },
  methods: {
    deleteP() {
      this.$emit('deleteDomain', this.index)
    },
    submitDomainGroup() {
      return this.$refs.domainGroup.validate()
    }
  }
}
</script>

父组件~1

<domain v-for="(item, index) in form.domainData"
  :key="index"
  :index="index"
  :item="item"
  ref="domainValidation"
  @deleteDomain="deldomain">
</domain>

父组件~2

delTwo(val) { // 删除域名
 if (val !== -1) {
      this.interceptForm.domainData.splice(val, 1);
  } else {
    this.$message({
      showClose: true,
      message: '当前不可删除！',
      type: 'warning'
    })
  }
},

父组件~3 提交部分的验证

var domainArr = this.$refs.domainValidation
var resultdomainArr=[]
for(var i in domainArr) {
  resultdomainArr.push(domainArr[i].submitDomainGroup())
}
Promise.all(resultdomainArr).then((result) => {
  if(result.length > 0) {
   // 验证表单成功
  }
}).catch(function() {
  return false
})