在vue项目开发中，会遇到不少表单验证问题，如果表单选项少我们大多是手写判定不为空，

 if (this.form.gzfzrxm == undefined || this.form.gzfzrxm == null) {
        this.$message.warning("工作负责人不能为空");
        return;
      }

那如果表单选项比较多时，我们就可以组件化表单验证，利用validate可以满足需求，实现快速开发；

   rules: {
        managePerson:[
          {
            required: true,
            message: "管理责任人不能为空",
            trigger: "blur",
          },
        ],
        executorPerson:[
          {
            required: true,
            message: "执行责任人不能为空",
            trigger: "blur",
          },
        ],
        zyjhmc:[
          {
            required: true,
            message: "工作任务不能为空",
            trigger: "blur",
          },
        ],
        // zyjhDw:[
        //   {
        //     required: true,
        //     message: "地市局不能为空",
        //     trigger: "change",
        //   },
        // ],
        supervisionUnit: [
          {
            required: true,
            message: "督察单位不能为空",
            trigger: "change",
          },
        ],
        problemSubsidiary: [
          {
            required: true,
            message: "分子公司不能为空",
            trigger: "blur",
          },
        ],
        checkedBy:[
          {
              required: true,
            message: "检查人不能为空",
            trigger: "blur",
          }
        ],
        workBm: [
          {
            required: true,
            message: "项目管理单位不能为空",
            trigger: "blur",
          },
        ],
        // threeQualifications: [
        //   {
        //     required: true,
        //     message: "三种人不能为空",
        //     trigger: "change",
        //   },
        // ],
        idNumber: [
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        // age: [
        //   {
        //     required: true,
        //     message: "年龄不能为空",
        //     trigger: "blur",
        //   },
        // ],
        supervisionAddress: [
          {
            required: true,
            message: "督察地点不能为空",
            trigger: "blur",
          },
        ],
        violationDescription: [
          {
            required: true,
            message: "问题描述不能为空",
            trigger: "blur",
          },
        ],
        // partyMember: [
        //   {
        //     required: true,
        //     message: "是否党员不能为空",
        //     trigger: "change",
        //   },
        // ],
        supervisionMode: [
          {
            required: true,
            message: "督察形式不能为空",
            trigger: "change",
          },
        ],
        zyjhZt: [
          {
            required: true,
            message: "工作主体不能为空",
            trigger: "change",
          },
        ],
        zyjhDw: [
          {
            required: true,
            message: "地市局不能为空",
            trigger: "change",
          },
        ],
        zyjhCategory: [
          {
            required: true,
            message: "作业类别不能为空",
            trigger: "change",
          },
        ],

        problemType: [
          {
            required: true,
            message: "违问题类型不能为空",
            trigger: "change",
          },
        ],
        zyjhType: [
          {
            required: true,
            message: "专业类型不能为空",
            trigger: "change",
          },
        ],
        operationMode: [
          {
            required: true,
            message: "工作方式不能为空",
            trigger: "change",
          },
        ],
        zhfxpgdj: [
          {
            required: true,
            message: "作业风险等级不能为空",
            trigger: "change",
          },
        ],
        systemClassification: [
          {
            required: true,
            message: "体系分类不能为空",
            trigger: "change",
          },
        ],
        supervisionLevel: [
          {
            required: true,
            message: "督察层面级不能为空",
            trigger: "change",
          },
        ],
   
        wtfssj: [
          {
            required: true,
            message: "问题发生时间不能为空",
            trigger: "blur",
          },
        ],
        wtms: [
          {
            required: true,
            message: "违章主要管理原因分析不能为空",
            trigger: "blur",
          },
        ],
        wzrydw: [
          {
            required: true,
            message: "当事人单位不能为空",
            trigger: "blur",
          },
        ],
        wzryxm: [
          {
            required: true,
            message: "当事人不能为空",
            trigger: "blur",
          },
        ],
        wzqrr: [
          {
            required: true,
            message: "发现人不能为空",
            trigger: "blur",
          },
        ],
        // wzjcr: [
        //   {
        //     required: true,
        //     message: "记录人不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // zgzrrId: [
        //   {
        //     required: true,
        //     message: "整改责任人不能为空",
        //     trigger: "blur",
        //   },
        // ],
        zgjy: [
          {
            required: true,
            message: "整改建议不能为空",
            trigger: "blur",
          },
        ],
        // zgqx: [
        //   {
        //     required: true,
        //     message: "整改期限不能为空",
        //     trigger: "blur",
        //   },
        // ],
        zgcs: [
          {
            required: true,
            message: "整改措施不能为空",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "备注不能为空",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "当前状态不能为空",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "排序号不能为空",
            trigger: "blur",
          },
        ],
        createBy: [
          {
            required: true,
            message: "创建者不能为空",
            trigger: "blur",
          },
        ],
        createTime: [
          {
            required: true,
            message: "创建时间不能为空",
            trigger: "blur",
          },
        ],
        updateBy: [
          {
            required: true,
            message: "更新者不能为空",
            trigger: "blur",
          },
        ],
        updateTime: [
          {
            required: true,
            message: "更新时间不能为空",
            trigger: "blur",
          },
        ],
        delFlag: [
          {
            required: true,
            message: "逻辑删除不能为空",
            trigger: "blur",
          },
        ],
      },

在表头加入

<el-form
          :class="{ border: unonber, 'red-sta': unonber }"
          ref="form"
          :model="form"
            //加入rules
          :rules="rules"
          label-width="120px"
        >

在提交前写入以下判断：

   this.$refs["form"].validate((valid) => {
        if (valid) {
                //form表单不为空，valid为真
          this.innerVisible=true
   }
    });