输入框用正则监听,只允许输入正数,支持两位小数,可以为空,如果不符合立刻清空输入框并提示错误信息
时间: 2024-02-02 16:02:42 浏览: 98
好的,您的问题是如何用正则监听一个输入框,只允许输入正数,支持两位小数,可以为空,如果不符合条件则立即清空输入框并提示错误信息。
首先,我们可以使用HTML5中的pattern属性来设置正则表达式,如下所示:
```html
<input type="text" pattern="^\d+(\.\d{1,2})?$" placeholder="请输入正数,支持两位小数" />
```
该正则表达式表示:
- `^` 匹配字符串的开始位置
- `\d+` 匹配一个或多个数字
- `(\.\d{1,2})?` 匹配0个或1个小数点后面跟1到2位数字的组合
- `$` 匹配字符串的结束位置
这样我们就可以限制输入框只能输入正数,支持两位小数了。但是,如果输入不符合条件,我们需要立即清空输入框并提示错误信息。我们可以使用JavaScript来实现这个功能,如下所示:
```html
<input type="text" id="myInput" pattern="^\d+(\.\d{1,2})?$" placeholder="请输入正数,支持两位小数" />
<script>
var input = document.getElementById("myInput");
input.addEventListener("input", function(event) {
var value = event.target.value;
if (!value.match(/^\d*(\.\d{1,2})?$/)) {
event.target.value = "";
alert("请输入正确的数字格式!");
}
});
</script>
```
这里我们使用了addEventListener方法来监听input事件,当输入框的值发生变化时,我们会检查它是否符合正则表达式的要求。如果不符合,就会清空输入框并提示错误信息。
阅读全文