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("前数不能小于后数"));
      }
    },
相关推荐
2501_920931703 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
0思必得04 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东5165 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino5 小时前
图片、文件的预览
前端·javascript
2501_920931706 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman05287 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔7 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李7 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN7 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒7 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局