element UI form表单自定义校验 callback无效

最新推荐文章于 2025-04-01 11:03:07 发布

前端码命

最新推荐文章于 2025-04-01 11:03:07 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45422787/article/details/119576062

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了在Vue.js中遇到的一个关于表单验证的问题，涉及自定义校验规则`multistagePriceRule2`。内容包括如何针对销售价和起批量进行一系列条件检查，确保输入数据的正确性和格式。文章详细展示了手动展开的校验代码，以确保每个数组元素的属性满足特定条件，如数值范围、正整数要求和小数位数限制。对于批量数据的校验，文中代码提供了一个实例，但指出尝试将该代码进行方法封装并循环调用时，回调函数(callback)失效。解决方案是逐行展开代码进行校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form-item
    v-else
     :key="formList.nationalType"
     label="销售价："
     prop="multistage_price"
     :rules="[{ validator: multistagePriceRule2 }]"	//	自定义校验
   >

问题是当把下面的代码用方法封装一下callback，循环value这个数组去调用的话，callback无效

最终解决的代码，手动一行行自己展开写

multistagePriceRule2(rule, value, callback) {
      if (!value.length) {
        return callback(new Error('销售价必填'))
      } else if (value[0].min_num <= 0) {
        return callback(new Error('起批量必须大于0'))
      } else if((value[0].min_num % 1 != 0) || value[0].min_num == 0 ) {
        return callback(new Error('起批量必须是大于0的正整数'))
      } else if (value[0].price <= 0) {
        return callback(new Error('销售价必须大于0'))
      } else if (value[0].price.split(".")[1] && value[0].price.split(".")[1].length > 2) {
        return callback(new Error('请保留小数位数为两位数'))
      } else if (value[1] && value[1].min_num <= 0) {
        return callback(new Error('起批量必须大于0'))
      } else if(value[1] && ((value[1].min_num % 1 != 0) || value[1].min_num == 0) ) {
        return callback(new Error('起批量必须是大于0的正整数'))
      } else if (value[1] && value[1].price <= 0) {
        return callback(new Error('销售价必须大于0'))
      } else if (value[1] && value[1].price.split(".")[1] && value[1].price.split(".")[1].length > 2) {
        return callback(new Error('请保留小数位数为两位数'))
      } else if (value[2] && value[2].min_num <= 0) {
        return callback(new Error('起批量必须大于0'))
      } else if(value[2] && ((value[2].min_num % 1 != 0) || value[2].min_num == 0) ) {
        return callback(new Error('起批量必须是大于0的正整数'))
      } else if (value[2] && value[2].price <= 0) {
        return callback(new Error('销售价必须大于0'))
      } else if (value[2] && value[2].price.split(".")[1] && value[2].price.split(".")[1].length > 2) {
        return callback(new Error('请保留小数位数为两位数'))
      } else {
        callback()
      }
    },

效果：

在这里插入图片描述