vue绕过rules自定义编写动态校验

今天犯了个低级错误，虽然走了很多弯路，但这个过程还是值得记录一下

例子如下，有两个输入框：

第一个是套餐选择下拉框，可以下拉选择三个内容

第二个要根据上面的套餐选择三个选项来决定怎么显示，使用v-if（第一个下拉框的值来做条件显示）

（1）如果套餐选择选招牌冰淇淋，第二个输入框就是招牌冰淇淋下拉框，

就以下拉框的形式显示口味

（2）如果套餐选择选小吃，第二个输入框就是小吃输入框，

就让客户自己填写什么小吃

（2）如果套餐选择选冷饮，第二个输入框就是冷饮输入框，

就让客户自己填写什么冷饮

然后无论第一个套餐选择选哪个选项，都要对第二个框进行非空、长度规则等校验，剩下的两个没选的就不做校验，这里其实v-if取了第一个下拉框的值来对第二个输入框做条件显示的时候，另外两个就不会显示，即不走rules，但我没把第二个输入框的规则写在rules里面，自己做了一个验证规则

具体逻辑就是在确定按钮提交表单时，调取this.validateForm()方法去校验一下第一下选的是哪个选项，再决定去校验后面的哪个输入框

核心校验代码： 

详细代码： 

<!--第一个下拉框-->
<el-form-item label="套餐选择" prop="setMealType">
  <el-select v-model="form.setMealType" placeholder="请选择变更类型" size="small" clearable>
    <el-option label="招牌冰淇淋" value="1"></el-option>
    <el-option label="小吃" value="2"></el-option>
    <el-option label="冷饮" value="3"></el-option>
  </el-select>
</el-form-item>
<!--        第二个输入框(1号)-->
<el-form-item label="招牌冰淇淋" prop="newVehicleColour" v-if="form.setMealType === '1'">
  <el-select v-model="form.newVehicleColour" placeholder="请选择冰淇淋口味" filterable clearable size="small">
    <el-option label="香草冰淇淋" value="1"></el-option>
    <el-option label="牛奶红枣" value="2"></el-option>
    <el-option label="薄荷香芋" value="3"></el-option>
  </el-select>
  <div>
    <span v-if="errors.newVehicleColour" class="err">口味不能为空!</span>
  </div>
</el-form-item>
        <!--        第二个输入框(2号)-->
<el-form-item label="小吃" prop="newMotornumber" v-if="form.setMealType === '2'">
  <el-input v-model="form.newMotornumber"  placeholder="请输入小吃" maxlength="30" ></el-input>
  <span v-if="errors.newMotornumber" class="err">小吃不能为空!</span>
</el-form-item>
        <!--        第二个输入框(3号)-->
<el-form-item label="冷饮" prop="newBatteryNum" v-else-if="form.setMealType === '3'">
  <el-input v-model="form.newBatteryNum" placeholder="请输入冷饮" maxlength="30" />
  <span v-if="errors.newBatteryNum" class="err">冷饮不能为空!</span>
</el-form-item>

 data和rules：(data声明errors , rules仅对第一个输入框校验)

data() {
      return {
        // 遮罩层
        loading: true,
        //表单参数
        form: {},
        // 错误信息
        errors: {},
        // 表单校验
        rules: {
          changeType: [{
            required: true,
            message: "请选择套餐类型",
            trigger: "blur"
          }],
        }
      };
    },

表单重置:(将this.errors置空)

 // 表单重置
      reset() {
        this.form = {
          id: null,
            ...
            ...
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null
        };
        this.errors = {};
        this.resetForm("form");
      },

校验规则:

      // 自定义校验方法
      validateField(field) {
        this.errors[field] = '';
        if (!this.form[field]) {
          this.errors[field] = `${field} 不能为空!`;
        }
      },
      // 校验所有字段
      validateForm() {
        this.errors = {};

        if (this.form.changeType === '1') {
          this.validateField('newVehicleColour');
        } else if (this.form.changeType === '2') {
          this.validateField('newMotornumber');
        } else if (this.form.changeType === '3') {
          this.validateField('newBatteryNum');
        }
        // 检查是否有错误
        for (const key in this.errors) {
          if (this.errors[key]) {
            // this.$message.error(this.errors[key]);
            return false;
          }
        }
        return true;
      },

重置按钮:

 /** 重置按钮操作 */
      resetQuery() {
        this.errors = {};
        this.resetForm("queryForm");
        this.handleQuery();
      },

表单提交按钮:

 /** 提交按钮 */
      submitForm() {
        if (this.validateForm()) {
          // 表单验证通过
          console.log('表单验证通过', this.form);
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.id != null) {
                update(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                add(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });
          // 这里可以添加提交表单的逻辑
        } else {
          // 表单验证失败
          console.log('规则验证失败', this.errors);
        }
      },

自定义提示语样式

<style>.err {
  color: red;
  font-size: 12px;
}
</style>