el-input输入校验，只允许输入数字或者带一个或两个小数点的数字。

### 如何校验 Element UI `el-input` 输入框内的数字数量 为了实现对 `el-input` 组件内输入的数字数量进行校验，可以在 Vue.js 中通过监听 `@input` 或者 `@change` 事件来获取用户的输入，并计算其中的有效数字字符的数量。 #### 方法一：使用正则表达式过滤并计数 可以利用 JavaScript 正则表达式的特性去除掉所有非数字字符（包括小数点），然后统计剩余字符串长度作为有效数字的数量： ```javascript methods: { countDigits(value) { // 去除非数字字符 const onlyNumbers = value.replace(/[^0-9]/g, ''); return onlyNumbers.length; }, } ``` 当用户每次改变输入时调用此方法即可得到当前已输入的有效数字总数。这可以通过绑定到 `v-model` 上的数据属性以及相应的事件处理器完成[^1]。 #### 方法二：遍历字符串逐位判断 另一种方式是直接遍历整个字符串，逐一检查每一位是否为数字，如果是，则增加计数器变量直到遍历结束为止: ```javascript methods: { countValidDigits(inputString){ let counter = 0; for(let i=0;i<inputString.length;i++){ if(!isNaN(parseFloat(inputString[i])) && isFinite(inputString[i])){ ++counter; } } return counter; } }, ``` 这种方法同样适用于实时更新显示给用户的反馈信息，比如提示他们已经输入了多少个有效的数值字符[^2]。 对于上述两种方案的选择取决于具体应用场景和个人偏好。如果只需要简单的数字计数而不需要考虑其他逻辑的话，推荐采用第一种更简洁高效的方式。