JS实现:0-10数字输入框,自动保留两位小数并校验
1星 需积分: 50 41 浏览量
更新于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之间并保留两位小数的要求,从而提供了一个良好的用户体验和数据准确性。
3525 浏览量
2397 浏览量
397 浏览量
6720 浏览量
2024-09-11 上传
2024-11-13 上传
2024-09-12 上传
2024-09-10 上传
f625199688
- 粉丝: 2
- 资源: 3
最新资源
- SYBASE ESQL参考手册
- 802.11(2007 Version)
- 数据结构教程实验答案
- C语言常见问题集(C程序员必要参考用书)
- 操作系统进程—超级详细
- 数值分析算法c语言程序实现
- Nucleus PLUS源码分析
- 电气设备预防性试验规程
- 电感元件的使用测试方法等
- struts2开发文档
- high preformace data minig
- IBatis学习资料,简单灵活
- J2ME_Game_Development_with_MIDP2.pdf
- 面试大全(jsp,servlet,Hibernate,spring,struts,数据结构等)
- 2003SMTP邮件中继
- JavaFX Script 编程语言中文教程PDF