1、表单使用

主要是prop属性， 与el-form的:rules="rules"属性相对应。

<el-form
          ref="formLabelAlign"
          label-position="right"
          label-width="130px"
          :model="formLabelAlign"
          :rules="rules"
          size="mini"
        >
          <el-form-item label="标题" prop="title">
            <el-input v-model="formLabelAlign.title" placeholder="提交时标题会自动生成" :disabled="infoType"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="任务开始日期" prop="xgStartTime">
                <el-date-picker
                  v-model="formLabelAlign.xgStartTime"
                  :disabled="infoType"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                  @blur="handleXgStartTimeBlur"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务截止日期" prop="xgEndTime">
                <el-date-picker
                  v-model="formLabelAlign.xgEndTime"
                  :disabled="infoType"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptionsEndTime"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
<el-form-item label="巡更项目/经营所" prop="proOpeId">
            <selectTreeOnly
              :disabled="infoType"
              :size="'mini'"
              :options="dataTree"
              :props="{ value: 'id', label: 'name' }"
              :id="formLabelAlign.proOpeId"
              @item="deptAdd"
            />
          </el-form-item>

2、data中rules规则编写。

rules: {
        xgStartTime: [
          {
            required: true,
            message: "请选择开始日期",
            trigger: "blur"
          }
        ],
        xgEndTime: [
          {
            required: true,
            message: "请选择截止日期",
            trigger: "blur"
          }
        ],
        cycle: [
          {
            required: true,
            message: "请填写周期",
            trigger: "blur"
          }
        ],
        duration: [
          {
            required: true,
            message: "请填写巡更时长",
            trigger: "blur"
          }
        ],
        proOpeId: [
          {
            required: true,
            message: "请选择巡更项目/经营所",
            trigger: "blur"
          }
        ]
}

3、表单提交时进行校验

handleAddDeploy() {
      this.$refs.formLabelAlign.validate(async valid => {
        if (!valid) return false;
        if (this.addFlag) {
          // 新增
          this.formLabelAlign = dataAddDefalutTime(this.formLabelAlign);
          this.addDeploy();
        } else if (this.updateFlag) {
          // 修改
          this.updateDeploy();
        } else if (this.reviewFlag) {
          // 审核
          this.reviewDeploy();
        } else if (this.apperoveFlag) {
          // 审批
          this.apperoveDeploy();
        }
      });
    },

4、动态的增加或者删除必填字段的校验

// 是否审核改变触发
    handleExamineSignChange(val) {
      // val == 0 是否审核: 否
      // 清空之前已经选择的审核人信息
      if (val === 0) {
        this.formLabelAlign.reviewerId = "";
        this.formLabelAlign.reviewerDeptId = "";
        this.formLabelAlign.reviewerShow = "";
        this.reviewerUserData = [];
      }
      if (val === 0 && this.rules.reviewerId) {
        // 追加验证
        delete this.rules.reviewerId;
        return;
      }
      // this.rules.reviewerId = [
      //   {
      //     required: true,
      //     message: "请选择审核人",
      //     trigger: "blur"
      //   }
      // ];
      this.$set(this.rules, "reviewerId", [
        {
          required: true,
          message: "请选择审核人",
          trigger: "blur"
        }
      ]);
      setTimeout(() => {
        this.$refs.formLabelAlign.clearValidate();
      });
    },

5、另一种校验，更加简洁

rules: {
        externalSupportPlace: [
          // 对外支援服务区域
          {
            required: true,
            validator: this.validationExternalSupportPlace,
            trigger: 'blur'
          }
        ],
        firstPhone: [
          {
            required: false,
            trigger: 'blur'
          },
          {
            // pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/,
            pattern: phone_regular,
            message: '手机号格式不对',
            trigger: 'blur'
          }
        ]
}

validationExternalSupportPlace(rule, value, callback) {
      this.$nextTick(() => {
        if (this.dataForm.externalSupport === 1 && !this.dataForm.externalSupportPlace) {
          return callback(new Error('请输入对外支援服务区域'))
        } else {
          callback()
        }
      })
    },