vue 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: {
  // 数量验证规则
    validItemCount(item) {
      return function(rule, value, callback) {
         if(value > item.PP.inventory || item.PP.inventory === 0){
          callback(new Error('库存不足计划数'));
        } else {
          callback();
        }
      };
    },
}
数字校验 tip

效果如图

 

posted @ 2024-01-19 16:06  小黄鸭  阅读(21)  评论(0)    收藏  举报