我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
关于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
评论(2)

鱼儿
木灵鱼儿