input type="number" 验证输入金额

最新推荐文章于 2026-04-06 02:52:23 发布

原创最新推荐文章于 2026-04-06 02:52:23 发布 · 2.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

探讨使用inputtype=number在手机网页中优化数字输入体验，虽然能预览数字键盘并限制字母和符号输入，但发现仍需处理字母'e'及多个小数点问题，介绍一种JavaScript方法实现更精确的数字验证。

用 input type="number" 在手机上预览网页，输入法弹出为数字键盘。

粗略试一下，可以禁止输入字母和符号，Hmm~这下可以省略输入框的验证了，偷个懒，美滋滋！（大雾）

但是仔细一点就发现，什么？字母e还能输入啊喂，小数点也能随便输入n个，完全不受限制，验证还是不能少哇

<input @input="inputHandler($event)">

inputHandler(e) {//金额输入
    let val = e.target.value.replace(/[^\d.]/g, "")//只允许一个小数点              
              .replace(/^\./g, "").replace(/\.{2,}/g, ".")//只能输入小数点后两位
              .replace(".", "$#$")//把第一个'.'替换成'$#$',
              .replace(/\./g, "")//把其余的字符'.'替换为空字符串(删除)
              .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
              .replace(/^(\-)*(\d+)\.(\d{1,2}).*$/, '$1$2.$3')

//^ : 匹配输入字行首;
//(\d+):匹配匹配1-n个数字;
//(\d{1,2})或(\d\d) : 一个两位的数字;
//.*$ : 后面匹配任意字符0-n个, 直到字符串结束.
//'$1$2.$3':' 替换目标：(第一组匹配).(第二组匹配)(第三组匹配)'
}