业务背景:el-input数字类型的各种校验
话不多说,上码,复制粘贴直接看效果
1. 输入数字后获取值为String 类型(.number )
<el-input
type="number"
v-model.number="xxx"
>
</el-input>
2. 只能输入正整数,不能以0开头,以负号(-)开头
<el-input
oninput="value=value.replace(/^(0+)|[^\d]+/g,''); "
type="number">
</el-input>
3. 输入小于xx的数,自动变成xx,例如:0
<el-input
oninput="if(value < 0 || value == null) value = 0;"
type="number">
</el-input>
4. 输入大于xx的数,自动变成xx,例如:99
<el-input
oninput="if(value > 99) value = 99; "
type="number">
</el-input>
5. 禁止输入空格==>(.trim)
<el-input
type="number"
v-model.trim="xxx"
>
</el-input>
6. rules常用校验
名称 | Value |
---|---|
手机号或者固话 | /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$ |
邮箱 | /^([a-zA-Z0-9]+[-_.]?)+@[a-zA-Z0-9]+.[a-z]+$/ |
合法IP | /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ |
小写字母 | /^[a-z]+$/ |
大写字母 | /^[A-Z]+$/ |
大小写 | /^[A-Za-z]+$/ |
数字英文,不包含特殊字符 | /^[a-zA-Z0-9]+$/ |
中文校验 | /^[\u0391-\uFFE5A-Za-z]+$/ |
两位小数 | /(^[1-9]([0-9]+)?(.[0-9]{1,2})?$)|((0){1}$)|([0-9].0-9?$)/ |
如果对你有帮助,赏个三连呗🙇🙇,不胜感激Thanks♪(・ω・)ノ