木灵鱼儿

木灵鱼儿

阅读:615

最后更新:2021/01/05/ 17:00:55

关于Element 表单验证数字类型不能为空字符的问题

今天写代码遇到一个问题,就是有一个输入框,他必须为整数,但是又不是必填的,默认的值是一个空字符,导致每次提交是都提示校验不通过。

<template>
  <el-input v-model.number="sort" placeholder="请输入分类排序"></el-input>
</template>

<script>
  export default {
    data(){
      return {
        sort:"",
       }
    }
  }
</script>

找了半天发现了一个方法,在校验的rules对象里面,有一个transform方法,他可以在校验之前对值进行操作,比如类型转换,操作修改。

但是还没有找到重点,为什么空字符会被检查到,是因为.number的问题,我们来回顾下官方对它的解释:

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number">

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

parseFloat() 解析空字符,返回的是NaN,转换不成功,于是返回原始值空字符串,空字符串再被整数(integer)校验,就会不成功,校验失败。

这也就导致,只有我们设置type类型为数字这种类型,就会遇到这个问题,因为空字符会被.number原样抛出来校验。

解决办法

解决办法就是上面刚刚说的,利用transform方法,我们在校验之前就对空字符串进行转换,比如转为0,0也是整数,校验就能通过,而源数据还是空字符,我们就可以进行正确的提交了。

这里我就不多写代码了,直接放校验那部分:

首先我们需要引入lodash,如果你没有引入,你可以手动自己转换一下

rules: {
  sort: [
          {
            type: "integer",
            min: 0,
            message: "排序的值为从0起的整数",
            trigger: "blur",
            transform(value) {
              return _.toNumber(value);
            },

          },

        ],
}

_.toNumber()是lodash的转换方法,不想使用这个库的,可以自己写转换方法。

这样我们问题就解决了。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 615

相关文章

目录树