木灵鱼儿
阅读:4920
element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?
整数校验
整数校验简单,input使用.number
修饰符,rules配置type属性即可。
<template>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="短信条数:" prop="sms_count">
<el-input v-model.number="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data(){
return {
form:{
sms_count:"",
},
rules:{
sms_count:[
{
required: true,
type: "integer",
message: "请输入短信数量",
trigger: "blur",
}
]
}
}
}
}
</script>
这样写,有一个缺陷,就是因为声明了整数类型,当内容为空时,.number
并不会把空字符转换为数字,他会原样返回,导致这个选项无形中成为了必填,因为在校验是否为整数时,无法通过整数类型校验。
所以,即便我们删除required
,这个选项在提交表单时,如果内容为空,无法通过验证。
解决办法:
饿了么框架的表单验证用的async-validator
,而async-validator支持一个转换方法,可以在验证前对校验的值做转换,而且这个转换并不会影响到表单绑定的源数据
{
required: true,
type: "integer",
message: "请输入短信数量",
trigger: "blur",
transform(value) {
return value ==="" ? 0 : Number(value);
},
}
当然,其实还可以简化一下,Number
转换空字符的时候,得到的结果是0,所以,如果没有最小值的要求,可以直接这样:
{
required: true,
type: "integer",
message: "请输入短信数量",
trigger: "blur",
transform(value) {
return Number(value);
},
}
这样,关于整数校验我们就可以完事了,如果有最小值最大值需求,自行设置min
和max
小数校验
小数校验我们就不能使用.number
修饰符了,他会将小数转为整数,而使用type声明类型为float
就可以表示他是一个小数类型校验,但是校验的数据类型还是string,所以我们需要手动转换。
<template>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="短信条数:" prop="sms_count">
<el-input v-model="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data(){
return {
form:{
sms_count:"",
},
rules:{
sms_count:[
{
required: true,
type: "float",
message: "请输入短信数量",
trigger: "blur",
transform(value) {
return Number(value);
},
}
]
}
}
}
}
</script>
配合transform转换成数字就行了,如果这不是一个必填项,去除required
也无法通过,因为他需要浮点数,而空字符转为数字得到的是0,所以,如果不是一个必填项,我们还需要这样做:
transform(value) {
return value === "" ? 0.1 : Number(value);
},
空的时候给0.1,让他蒙混过关即可。
价格验证
价格也是一个数字,但是他有两种情况,一种是整数,一种是浮点数,但是都不能小于0。
这里,我们就只能使用自定义校验了,因为有小数,所以.number
不能使用
<template>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="短信条数:" prop="sms_count">
<el-input v-model="form.sms_count" placeholder="请输入套餐短信条数"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data(){
return {
form:{
sms_count:"",
},
rules:{
sms_count:[
{ required: true, message: "请输入短信条数", trigger: "blur" },
{
transform(value) {
return Number(value);
},
validator(rule, value, callback) {
if (Number.isFinite(value) && value >= 0) {
callback();
} else {
callback(new Error("请输入不小于0的数字"));
}
},
trigger: "blur",
}
]
}
}
}
}
</script>
这里我自定义校验没有判断是否为空,所以必填校验required
单独一条配置数据。
在自定义校验中,我们先transform
转为数字,如果不是必填,同样可以通过他蒙混过关。
validator
中,我们判断,这个数字如果是一个有限数字;并且不大于或等于0,我们就他通过,其他则报错。
Number.isFinite(value)
有限数字是一个什么范围呢?
简单理解为正负值都在Infinity
无限值以内,NaN和字符串这些都不算,而Infinity无限并不是真的无限,他实际是有边界的,他的边界已经是js能处理的数字极限了,所以,我们这样判断完全ok。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个基于策略模式的表单校验
最近项目居然要求不能使用vue cli这种工程化极度成熟的开发方案,非常痛苦的继承了上一代的gulp打包。苦哈哈!这也就导致不能使用ts,babel的兼容处理更是极少极少的,写啥都是得想一下,特别是没有箭头函数,this的指向我都bind了不知道多少次了。这次的功能里有一个表单校验的需求,所以我想着封装一个小工具来提高书写代码的流畅度,加上之前就一直想写一个基于策略模式的实际实现,这次赶巧给碰上了。东西比较多就不直接贴代码了,我上传到github仓库了,有兴趣去看看。github:CustomValidator效果演示

实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...
