手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

ElementUI的form校验的number

首页 > Javascript >

 一般而言,elementUI的prop+rules可以用来对字段进行校验。大多数情况下感觉都没什么问题,毕竟官方的例子摆在那里。element-plus的例子没有的,element-ui2的例子也比较全。

但element-plus和elementui中都 没有对number类型进行介绍,如果直接{type:'number',....} 不管你填入什么值 ,都会报错,即使你用el-input+type="number",效果仍然一样
这是因为vue对所有的input默认都是当成string来解析的,因此你对一个string判断number,肯定就是失败的
网上80%的例子都是说采用:v-model.number="form.xxx" 来处理,确实,这样处理是OK的,但你会发现一个很严重的问题,那就是能输入的内容都是integer了。没法有小数点
 
这时候其实还是可以看element-plus所使用的async-validator的官方例子,因为黑夜的象{required:true},{type:"array"}等,都是来自于async-validator的官方支持,而官方是支持type="number"的。现在剩下的其实就是将el-input中的内容转为Number进行判断。仅此而已
 
官方的例子中有transform,这是一个钩子函数,用于验证前将数据进行简单的转换,比如我们就可以{type:"number",transform: Number},如果不能转成Number,其实也就失败了
 
---
临时写的,就先这样,后续有机会慢慢写的更详细一点,也或许就不再写了
参考:
1、https://github.com/yiminghe/async-validator
2、https://www.cnblogs.com/alabo1999/p/14990310.html (正好找到这一篇足够详细,估计我也不会再多写了)
 
 



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):