在项目中,很多时候都会有输入框的存在,为了防止用户随意输入都会有限制,最近遇到一种需求,输入价格时只能输入数字类型,并且输入的数字格式要正确,
在网上搜索的很多验证数字的对格式没有校验,所以自己就完善了一下,使用的正则表达式,但是由于自己正则知识实在匮乏,写的比较low,不过也能实现最终的效果吧
能通过验证的数字类型: 0.9, 1, 20....
不能通过验证的数字: 00.9, 0, 09, 99., 其他包含字母,标点符号的字符串
项目里的输入框是用的element的form表单,form表单自带验证规则,我这个是写在自定义验证规则里的,不过修改一下也可以单独使用
var checkPrice = (rule, value, callback) => { let zero = /^0+\d*$/ // 过滤以0开头的数据(不含小数点) let dublue = /^0{2,}\.\d+$/ // 过滤小数点前有两个以上0的数字 let point = /^\d+\.?\d+$/ // 以数字开头,可以允许出现一次或0次小数点,以数字结尾(这里的数字必须有两个) let reg = /^[1-9]{1}$/ // 匹配只有一个数字的情况 if (!value) { callback(new Error(‘Please enter the unit price‘)) } setTimeout(() => { if (zero.test(value) || dublue.test(value)) { // 首先过滤掉错误的数据 callback(new Error(‘Enter the correct number format‘)) // 调取输入框验证的方法 } else if (point.test(value) || reg.test(value)) { // 匹配数据,如果输入的数字只有一位数时用reg匹配 callback() // 验证通过 } else { callback(new Error(‘Enter the correct number format‘)) } }, 100) }
也可以写成一个函数使用
function checkPrice (value) { let zero = /^0+\d*$/ // 过滤以0开头的数据(不含小数点) let dublue = /^0{2,}\.\d+$/ // 过滤小数点前有两个以上0的数字 let point = /^\d+\.?\d+$/ // 以数字开头,可以允许出现一次或0次小数点,以数字结尾(这里的数字必须有两个) let reg = /^[1-9]{1}$/ // 匹配只有一个数字的情况 if (!value) { return false } if (zero.test(value) || dublue.test(value)) { // 首先过滤掉错误的数据 return false } else if (point.test(value) || reg.test(value)) { // 匹配数据,如果输入的数字只有一位数时用reg匹配 return true } else { return false } }
使用效果
因为对正则也是一知半解,所以写得很重复,如果有优化意见希望能告知(*^▽^*)
原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/9778860.html
时间: 2024-10-09 03:10:04