el-input单独校验

el-input单独校验,效果图如下

复制代码
          <el-col :span="24">
            <el-form-item label="修订次数:" prop="sPublish">
              <el-input-number
                v-model="addForm.sPublish"
                :min="0"
                :controls="false"
                :precision="0"
                placeholder="请输入"
                @change="changesPublish"
                style="width: 80px"
                size="small"
              />
              -
              <el-input-number
                v-model="addForm.ePublish"
                :min="0"
                :controls="false"
                :precision="0"
                placeholder="请输入"
                style="width: 80px"
                size="small"
                @change="changesPublish"
              />
            </el-form-item>
          </el-col>

data中定义校验规则

复制代码
    saerchFormRules: {
        sPublish: [{ validator: this.validatePass, trigger: "blur" }],
      },

methods中使用

复制代码
 // 查询修订次数
    changesPublish(val) {
      this.$refs.addForm.validateField("sPublish");
    },

    validatePass(rule, value, callback) {
      if (this.addForm.sPublish > this.addForm.ePublish) {
        return callback(new Error("前数不能小于后数"));
      }
    },
相关推荐
恋猫de小郭10 分钟前
Flutter 开始支持 Jetpack Compose Platform View
android·前端·flutter
IT_陈寒31 分钟前
React实战技巧总结
前端·人工智能·后端
陈随易8 小时前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
Dream-Y.ocean10 小时前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos
Csvn11 小时前
性能监控
前端
Highcharts.js11 小时前
Highcharts Gantt使用符号的自定义数据标签开发甘特图示例
javascript·甘特图·highcharts·图表开发·实战代码·响应式图表
Csvn11 小时前
构建工具
前端
FRing0312 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
Java小卷13 小时前
JuanForm vs FormCreate!Vue3 表单引擎联动配置 PK!
vue.js·低代码
kyriewen14 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员