element ui表单验证模板

    <!--  -->
    <el-form :model="dynamicValidateForm"
             ref="dynamicValidateForm"
             label-width="150px"
             class="demo-dynamic">
      <el-form-item v-for="(item, index) in dynamicValidateForm.domains"
                    :label="item.label"
                    :key="item.label"
                    :prop="'domains.' + index + '.'+item.value"
                    :rules="ruless[item.value]">
        <div v-bind="item.attrs"
             class="formInput"
             :is="item.type"
             v-model="item[item.value]"
             autocomplete="off">
          <div v-if="item.options">
            <el-option v-for='ite in item.options'
                       :key="ite.value"
                       :label="ite.label"
                       :value="ite.value">
            </el-option>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ -->

      dynamicValidateForm: {
        domains: [
          {
            a: '',
            label: '合同编号：',
            type: 'el-input',
            value: 'a',
            attrs: { placeholder: '请输入合同编号' },
          },
          {
            b: '',
            label: '车皮号：',
            type: 'el-input',
            value: 'b',
            attrs: { placeholder: '请输入车皮号' },
          },
          {
            c: [],
            label: '要求交货日期：',
            type: 'el-date-picker',
            value: 'c',
            attrs: {
              format: 'yyyy年MM月DD日',
              'value-format': 'yyyy-MM-DD',
              'start-placeholder': '开始日期',
              'end-placeholder': '结束日期',
              'range-separator': '-',
              type: 'daterange',
            },
          },
          {
            d: '',
            label: 'd',
            label: '订单状态：',
            type: 'el-select',
            value: 'd',
            attrs: { placeholder: '请选择订单状态' },
            options: [
              {
                value: '-1',
                label: '全部',
              },
              {
                value: '0',
                label: '未发货',
              },
              {
                value: '1',
                label: '已在途',
              },
              {
                value: '2',
                label: '已完成',
              },
            ],
          },
        ],
      },
      ruless: {
        a: [
          { required: true, message: 'a不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        b: [{ required: true, message: 'b不能为空', trigger: 'blur' }],
        c: [{ required: true, message: 'c不能为空', trigger: 'blur' }],
        d: [{ required: true, message: 'd不能为空',trigger: ['blur', 'change']}],
      },
      ///

    submitForm(formName) {
      let newfrom = {}
      this.dynamicValidateForm.domains.map((item, index, arr) => {
        newfrom[item.value] = arr[index][item.value]
      })
      console.log(newfrom, '//')
      this.$refs[formName].validate((valid) => {
        if (valid) {
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },