关于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的转换方法，不想使用这个库的，可以自己写转换方法。

这样我们问题就解决了。