关于Element-ui表单验证的坑

首先，根据官网示例，大家都知道element的表单验证是这样的：
1、这是HTML部分，

<el-form :model="ruleForm" :rules="rules" ref="ruleForm"></el-form>

2、这是js部分,其中包含了规则和表单提交

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

其实就这样看来，一个表单的功能已经完成了，有rules做表单内容的验证，也有submitForm做验证通过后的内容的提交，但是大家会发现，这样是写死的，也就是说，你要验证多少内容，你就要放多少el-form-item，然后再根据需求制定验证规则等。既然都用vue了，那为什么不能用循环做呢？不方便许多？接着我就标准的在要el-form-item上放了v-for做循环，接下来却发现，验证失效了！后来各种百度，发现element官网是有说动态表单验证的，但是，官方的说明放在了这里，坑死我了。

在这里，官方的例子已经很清楚了，就不多说了。点此查看示例

接下来就是第二个问题，如果我一个页面不止一个form表单怎么办？

<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>

 submitForm(formName) {
     this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
       }
    });
 },

根据代码可以明显的看出来，也是写死的，所以只能验证一个表单，如果我要验证2个表单怎么办？
接下来是笔者找到的方法,是利用Promise解决的。

//1：data里需要定义的数据
formArr: ['ref1','ref2'], //需要验证的表单，需要验证几个就放几个
resultArr: [], //接受验证返回结果数组
//2: 定义验证函数
checkForm(formName){
    let _this = this;
    let result = new Promise(function(resolve,reject){
        _this.$refs[formName].validate((valid)=>{
          if(valid){
            resolve();
          }else {
            reject();
          }
        })
    })
    _this.resultArr.push(result);  //得到promise的结果
},

//3:定义提交函数
//提交
confirmImageSetting() {
	//每次提交前重置验证返回结果的数组,这里不清空只要一开始验证失败就会一直失败
   this.resultArr = [];
   let that = this;
   this.formArr.forEach((item) => {
   		_this.checkForm(item);  //调用定义的检查函数
   })
   Promise.all(this.resultArr).then(function () {
     //验证全部通过
    }).catch(function (data) {
   //验证失败 提示reject失败状态的值
     that.$message.error(data);
   });
 }
原文链接：https://blog.csdn.net/weixin_43753330/article/details/90477125

最后一个问题，像上面这个例子，虽然能做到多表验证，但是会发现，除了一些数据，其他的内容几乎一模一样，那么为什么不能做成一个组件呢？能减少大量的代码量。关于这个问题笔者自己尝试做了一下，但是由于技术原因找不到好的解决办法，如果有带佬有方法的话，能分享出来就最好了，最后祝大家共勉！

注: 本篇文章因为是百度搜出来的，具体借鉴了哪位大佬的也忘了，如果有侵犯请联系。提前说声抱歉了。