数字类型的表单验证并且动态指定是否必填的解决方法

最近在项目中有一个需求，左侧是下拉框，右侧是输入框。要求选择左侧某一项的时候右侧的不需要填写，其余的选项必须要填写，此时就需要用到validator自定义验证规则

话不多说直接上代码

此处是teplate片段，data数据在下方

<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      :inline="true"
    >
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="北京" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动名称" prop="name">
        <el-input
          :placeholder="ruleForm.region === 'shanghai' ? '可不填' : ''"
          v-model.number="ruleForm.name"
          :disabled="ruleForm.region === 'shanghai'"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

这里是data，data中的代码比较重要，核心思路在自定义验证规则里，总共是有三种情况，1用户选的是必填项并且又没有输入值，2用户输入值了需要验证是不是数字，3值不存在并且又不是必填项那么直接放行即可（备注，因为我给输入框动态设置了disabled，所以不是必填项就禁用了）

 data() {
    let blurText = (rule, value, callback) => {
      //val不存在并且是必填项，则提示错误
      if (!value && this.ruleForm.region != "shanghai") {
        callback(new Error("请输入整数的生效时间"));
      } else if (value) {
        //value存在，那么需要验证是否是数字
        const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
        if (!boolean) {
          this.$message.warning("请输入正整数");
          this.ruleForm.name = "";
        } else {
          callback();
        }
      } else {
        //value不存在并且不是必填项，则不提示错误
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        region: "",
      },
      rules: {
        name: [
          // { message: "请输入活动名称", trigger: "blur" },
          {
            validator: blurText,
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };

按钮绑定的回调函数，这个没什么要求

  methods: {

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