inputNumber输入框用正则表达式限制输入1-99的整数完整代码
时间: 2024-04-30 20:25:13 浏览: 130
使用正则限制input框只能输入数字/英文/中文等等
以下是一个使用正则表达式限制输入1-99的整数的完整代码示例:
HTML部分:
```html
<label for="number-input">请输入1-99的整数:</label>
<input type="text" id="number-input" pattern="^[1-9][0-9]?$|^99$">
```
在上面的代码中,我们使用了 `pattern` 属性来指定输入框的正则表达式限制。正则表达式 `^[1-9][0-9]?$|^99$` 表示输入的字符串必须以一个非零数字开头,后面可以跟一个任意数字(可选),或者直接输入99。
JavaScript部分:
```javascript
const numberInput = document.getElementById('number-input');
numberInput.addEventListener('input', function() {
const value = this.value.trim();
if (!value) return;
if (!/^(?:[1-9][0-9]?|99)$/.test(value)) {
this.value = '';
alert('请输入1-99的整数!');
}
});
```
在上面的代码中,我们通过监听输入框的 `input` 事件来检查输入的内容是否符合要求。如果输入的内容不符合要求,则清空输入框的内容并弹出提示框。
需要注意的是,我们在使用正则表达式时,使用了非捕获组 `(?:)` 来避免产生多余的捕获组。
阅读全文