input框对金额的基本校验

众做周知业务中对于钱包金额的需求是非常频繁且重要的, 尤其涉及到电商, 提现等领域, 这段时间正好在做此类业务, 在针对于用户输入金额提现的校验逻辑整理了一下, 做这块的时候是比我想象的还要复杂的, 要考虑多种情况, 感觉就是在写计算器一样, 当然这里不涉及到加减乘除, 只是最基础的输入金额逻辑, 复杂度肯定没有计算器高, 以后打算也出一个写计算器的文章, 哈哈, 废话不多说, 直接上干货

温馨提示: 本次实现使用 JS 完成, 但逻辑都是通用的, 不限语言, 主要原理是利用正则表达式来限制输入

禁止输入非数字和点
text.replace(/[^\d.]+/, ‘’);
[]: 定义匹配的字符范围

^: 在 [] 号内意思是匹配取反, 也就是不是数字和点的符号

\d: 匹配数字

.: 匹配点号

+: 出现一次或多次

text.replace 是 JS 的替换字符串的方法, 具体请看 String.prototype.replace()
禁止以点开头
text.replace(/^./g, ‘’);
^.: 以点开头

g: 全局匹配

注意: 这里的 ^ 与上面 ^ 含义不一样, 在 [] 内就表示匹配非 xx 字符, 在外部表示以 xx 开头
禁止连续两次输入点
text.replace(/.{2,}/g, ‘.’);
{2,}: 表示连续出现 2 及以上

一个点后面禁止输入点
这时掏出计算器可以试一下, 计算器只能输入一个小数点, 同样金额也一样

text.replace(‘.’, ‘KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲’)
.replace(/./g, ‘’)
.replace(‘KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲’, ‘.’);
第一行: 替换点号为 KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲

第二行: 全局查找点号替换为空字符串

第三行: 把KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲还原为点号

禁止小数超过两位
text.replace(/^(-)(\d+).(\d\d).$/, ‘$1$2.$3’);
^(-)*: 以 - 号开头出现 0 次或多次, 第一个分组

(\d+): 数字出现一次或多次, 第二个分组

.: 匹配点号

(\d\d): 两位数字, 这里可以随这需求更换, 一个 \d 表示一位, 第三个分组

.*: 贪婪匹配

$1$2.$3: 正则匹配的分组替换为变量名, 改变输入的形式, 这里是 replace 方法的特性

replace 方法变量解释
禁止开头连续输入两个0
text.replace(/^0+/, ‘0’);
^0+: 以 0 开头出现一次或多次

输入字符大于等于 1 时剔除开头的 0
if (Number(text) >= 1) {
text = text.replace(/^0+/, ‘’);
}
这里需要转换一下数字类型, 进行判断, 然后进行匹配

总结
text.replace(/[^\d.]+/, ‘’); // 禁止非数字和点
text.replace(/^./g, ‘’); // 禁止以点开头
text.replace(/.{2,}/g, ‘.’); // 禁止连两次输入点
text.replace(‘.’, ‘KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲’)?.replace(/./g, ‘’)?.replace(‘KaTeX parse error: Expected 'EOF', got '#' at position 1: #̲’, ‘.’); // 一个点后面禁止输入点
text.replace(/^(-)(\d+).(\d\d).$/, ‘$1$2.$3’); // 禁止小数超过两位
text.replace(/^0+/, ‘0’); // 禁止开头连续输入两个0
if (Number(text) >= 1)
text = text.replace(/^0+/, ‘’); // 输入字符大于等于 1 时剔除开头的 0
}
此次金额校验使用到了 JS 的 replace 和 正则表达式 的知识, 一个输入金额的小功能还是要从多种场景来考虑和衡量, 如果对此篇文章有任何的建议, 可以在评论区讨论, 感谢观看