木灵鱼儿

木灵鱼儿

阅读：2652

最后更新：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的转换方法，不想使用这个库的，可以自己写转换方法。

这样我们问题就解决了。

文章分类 vue 项目实战
文章标签 vueelement整数表单校验空字符
木灵鱼儿

木灵鱼儿

发布了 718 篇文章获得点赞 0获得阅读 2652

版权申明

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

one
two
three
  1. 鱼儿
    鱼儿
    Google Chrome Windows 10

    你可真是个机灵鬼

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @鱼儿

      你又知道了？

      回复

关于作者

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

相关文章

利用原生css实现hash哈希定位跳转偏移量处理利用原生css实现hash哈希定位跳转偏移量处理
ts实战：给没有类型声明的第三方库编写一个类型声明文件ts实战：给没有类型声明的第三方库编写一个类型声明文件
利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类

目录树