首页 > 其他分享 >vue validator 扩展

vue validator 扩展

时间:2024-01-19 16:12:20浏览次数:37  
标签:计划数 vue item 验证 扩展 校验 value callback validator

Element UI Form

1.问题:有个表单里面是表格,可以提交多行数据,每一行都有计划数ItemCount需要校验,校验标准是与同一行的另一个输入框Inventory的值比较,如果ItemCount>Inventory 就要有tip提示,不能用弹出框

参考 官网的例子 密码的二次验证 ,但我这里又不同,我是有多行验证的,我需要传参数到验证方法里。最终改良代码如下

                <el-form-item
                    :prop="'PPItems.' + scope.$index + '.itemCount'"
                    :rules="[
                      {required: true,message: '数量不能为空', trigger: 'blur' },
                      {validator: validItemCount(scope.row), trigger:['blur','change']}
                    ]"
                  >
<el-input-number
                      v-show="!scope.row.ifClickSave"
                      v-model="scope.row.itemCount"
                      :precision="6"
                      :min="0.000001"
                      :max="scope.row.PP.inventory"
                      class="number-kk"
                      clearable
                      controls-position="right"
                    />
                 </el-form-item>

//方法
methods: {
  // 数量验证规则
    validItemQty(item) {
      return function(rule, value, callback) {
        if(value == 0){
          callback(new Error('计划数不能为0'));
        }else if(value > item.PP.inventory || item.PP.inventory === 0){
          callback(new Error('库存不足计划数'));
        } else {
          callback();
        }
      };
    },
}
数字校验 tip

 效果如图

 

标签:计划数,vue,item,验证,扩展,校验,value,callback,validator
From: https://www.cnblogs.com/xiangnile/p/17974917

相关文章

  • 第32节: Vue3 方法处理程序
    在UniApp中使用Vue3框架时,你可以使用方法处理程序来定义在模板中调用的自定义函数。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用方法处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view><......
  • 第31节: Vue3 内联处理程序
    在UniApp中使用Vue3框架时,你可以使用内联处理程序来直接在模板中编写JavaScript代码。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用内联处理程序:<template><view><button@click="handleClick">Clickme</button><p>{{message}}</p></view>......
  • 第30节: Vue3 监听事件
    在UniApp中使用Vue3框架时,你可以使用监听事件来响应用户的操作。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用监听事件:<template><view><button@click="handleClick">Clickme</button></view></template><scriptsetup>import{......
  • 第29节: Vue3 列表渲染
    在UniApp中使用Vue3框架时,你可以使用列表渲染语法来动态地渲染一个列表。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用列表渲染:<template><view><button@click="addItem">AddItem</button><ul><liv-for="(item,index)initems":......
  • 第28节: Vue3 条件渲染
    在UniApp中使用Vue3框架时,你可以使用条件渲染来根据条件动态地显示或隐藏元素。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用条件渲染:<template><view><button@click="toggleActive">ToggleActive</button><pv-if="isActive">Thisisactive</p......
  • 第26节: Vue3 绑定到对象
    在UniApp中使用Vue3框架时,你可以使用对象绑定语法将属性绑定到对象上。下面是一个示例,演示了如何在UniApp中使用Vue3框架使用绑定到对象:<template><view><button@click="toggleActive">ToggleActive</button><div:style="{color:activeColor,fontWeight:......
  • 基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统
    Tansci-Boot基于SpringBoot2+magic-api+Vue3+ElementPlus+amis3.0快速开发管理系统Tansci-Boot是一个前后端分离后台管理系统,前端集成amis低代码前端框架,后端集成magic-api的接口快速开发框架。包含基础权限、安全认证、以及常用的一些组件功能。项目......
  • Vue3 Diff算法之最长递增子序列,学不会来砍我!
    专栏分享:vue2源码专栏,vue3源码专栏,vuerouter源码专栏,玩具项目专栏,硬核......
  • Vue自建文档(部分)
    数据驱动视图驱动方法 //导入Vue文件<scriptsrc="Vue.js"></script>//创建Vue实例对象<script>constvm=newVue({//选择器表示控制区域,一般最外层加个div来对整个页面进行控制el:'#app',//数据源data:{ username:'张三', info:&#......
  • Google的Jax框架的JAX-Triton目前只能成功运行在TPU设备上(使用Pallas为jax编写kernel
    使用Pallas为jax编写kernel扩展,需要使用JAX-Triton扩展包。由于Google的深度学习框架Jax主要是面向自己的TPU进行开发的,虽然也同时支持NVIDIA的GPU,但是支持力度有限,目前JAX-Triton只能在TPU设备上正常运行,无法保证在GPU上正常运行。该结果使用kaggle上的TPU和GPU进行测试获得。......