表单验证之（结束数值大于开始数值）

最新推荐文章于 2023-09-09 08:45:27 发布

CodeMonkey陈

最新推荐文章于 2023-09-09 08:45:27 发布

阅读量461

点赞数

分类专栏： html js 文章标签： vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/qq_29945661/article/details/125728406

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

html

 <el-form-item label="编号范围">
          <el-col :span="11">
            <el-form-item prop="startNum">
              <el-input
                style="width: 160px"
                type="number"
                clearable
                v-model="YXCXForm.startNum"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="endNum">
              <el-input
                style="width: 160px"
                clearable
                type="number"
                v-model="YXCXForm.endNum"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>


data() {
    const numberEndRule = (rule, value, callback) => {
      if (this.YXCXForm.startNum != null) {
        if (Number(value) >= this.YXCXForm.startNum) {
          if (Number.isInteger(Number(value)) && Number(value) > 0) {
            callback();
          } else {
            callback(new Error("请输入大于零的正整数"));
          }
        } else {
          callback(new Error("结束编号必须大于开始编号"));
        }
      } else {
        callback(new Error("请先输入开始编号"));
      }
    };
    const numberStartRule = (rule, value, callback) => {
      if (Number.isInteger(Number(value)) && Number(value) > 0) {
        callback();
      } else {
        callback(new Error("请输入大于零的正整数"));
      }
    };
    return {
     
      YXCXForm: {
        mainId: "",
        datepicker: [],
        startDate: "",
        endDate: "",
        checkType: 1,
        nucleicNum: 1,
        startNum: null,
        endNum: null,
        hType: 0,
      },
      YXCXRules: {
        checkType: [
          { required: true, message: "请选择检查类型", trigger: "change" },
        ],
        datepicker: [
          {
            type: "array",
            required: true,
            message: "请选择日期范围",
            trigger: "change",
          },
        ],
        nucleicNum: [
          { required: true, message: "请选择核酸次数", trigger: "change" },
        ],
        startNum: [{ validator: numberStartRule, trigger: "change" }],
        endNum: [{ validator: numberEndRule, trigger: "change" }],
      },
  
    };
  }