JS实现:0-10数字输入框,自动保留两位小数并校验

1星 需积分: 50 29 下载量 98 浏览量 更新于2024-09-10 收藏 1KB TXT 举报
"JavaScript 实现输入限制在0-10之间的两位小数验证功能" 在JavaScript编程中,经常需要对用户输入进行校验,确保数据符合特定格式或范围。在这个场景中,目标是创建一个输入框,用户可以输入0到10之间的数值,并且这个数值应该保留两位小数。下面我们将详细探讨如何实现这一功能。 首先,我们看到HTML部分包含两个`<input>`标签,分别用于输入电话号码和金额。在我们的案例中,关注的是`id="presentAmount"`的输入框,它的占位符提示用户输入10位数字。另外,页面上还有隐藏的`<span>`元素和`<input>`元素,用于显示错误信息和错误标志。 JavaScript部分使用了jQuery库来监听`keyup`事件,这意味着每当用户在`#presentAmount`输入框中释放一个按键时,都会触发对应的函数。在这个函数内部,我们首先隐藏了错误信息标签`#presentAmountError`,然后获取并清理输入框的值。 接下来,我们定义了一个正则表达式(RegEx)模式`patt`,用于检查输入值是否合法。这个正则表达式包含了以下规则: 1. 首先允许输入一个数字,后面可以跟一个小数点和最多两位的小数。 2. 或者,允许输入整数10,后面也可以跟一个小数点和零位小数。 使用`new RegExp()`构造函数创建正则表达式后,我们使用`test()`方法来检查输入的`price`值是否符合这个模式。如果不符合,或者输入为空,我们会设置错误标志并显示错误信息。 具体代码如下: ```javascript $("#presentAmount").on("input", function() { $("#presentAmountError").hide(); var price = $.trim($("#presentAmount").val()); if (price === "" || price === null) { $("#amountErrorFlag").val("0"); return true; } var patt = /^([0-9]{1}(\.([0-9]{0,2}))?|10(\.[0]{0,2})?)$/; if (!patt.test(price)) { $("#amountErrorFlag").val("1"); $("#presentAmountError").show().text("输入不正确,请输入0-10的两位小数"); } }); ``` 这段代码中,我们使用了`on("input"`而不是`live("keyup")`,因为`live`方法在jQuery新版本中已被弃用,推荐使用`on`来替代。此外,我们修改了错误检查逻辑,当输入不合法时,直接显示错误信息。 通过这样的方式,我们可以确保用户在输入框中输入的数据始终符合0-10之间并保留两位小数的要求,从而提供了一个良好的用户体验和数据准确性。