金额输入框校验

CV高级工程师001

已于 2022-05-10 15:56:01 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 jquery

于 2022-01-19 09:54:07 首次发布

本文链接：https://blog.csdn.net/weixin_46745445/article/details/122574177

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在前端实现的金额输入与校验方法，通过JavaScript确保用户输入的金额为合法数值并保留两位小数。此外，还展示了如何将这些金额参数传递到后台进行数据查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

金额校验

input框输入金额区间，查找数据；校验金额合法性，保留两位小数

效果：

在这里插入图片描述

实现步骤：

xx.html

<input type="text" id="startMoney" name="startMoney" onkeyup="verify(this)" style="width:100px" />
<span>~</span>
<input type="text" id="endMoney" name="endMoney" onkeyup="verify(this)" style="width:100px;" /> 元

xx.js

// 限制输入的金额只能为数字，并且只能保留2位小数
function verify(obj){
    obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
    obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
    obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
    obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");//限制"10.5." 这种情况
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
}

使用 JS 或 JQ 取值传到后台，略过。

xxMapper.xml

<!-- 金额区间 -->
<if test="startMoney != null and startMoney != ''">
	and IFNULL(totalAmount,0) >= #{startMoney}
</if>
<if test="endMoney != null and endMoney != ''">
	and #{endMoney} >= IFNULL(totalAmount,0)
</if>