el-input输入只能输入正数字和正小数的正则校验

### el-input 组件限制正整数和正小数输入的正则校验 为了确保 `<el-input>` 组件中的输入值仅为正整数或正小数，可以使用以下几种方法实现。这些方法基于提供的引用内容进行了优化，并结合了专业的正则表达式设计原则。 --- #### 方法一：通过 `oninput` 实现 可以通过 `oninput` 属性绑定一段脚本，利用正则表达式过滤非法字符并保留合法的正整数或正小数。 ```html <el-input v-model="positiveNumber" oninput="value = value.replace(/[^0-9.]/g, '').replace(/^\.+|[^\d]+\./g, '').replace(/\.{2,}/g, '.').replace(/^\./g, '').match(/^\d+(\.\d{0,2})?$/g)[0] || ''" placeholder="请输入正整数或正小数" /> ``` 该正则表达式的含义如下： - `/[^0-9.]/g`: 移除非数字和小数点以外的所有字符[^1]。 - `/^\.+/`: 禁止以小数点开头的情况。 - `/[^\d]+\./`: 确保小数点前至少有一个数字存在。 - `/\.{2,}/`: 防止连续的小数点出现。 - `/^\d+(\.\d{0,2})?$/`: 限定整个字符串为正整数或至多两位小数的正小数[^5]。 --- #### 方法二：通过 Vue 数据监听与计算属性实现 除了直接在 HTML 中编写正则外，还可以通过 Vue 的数据监听器或计算属性来动态更新输入框的内容。 ##### 示例代码 ```javascript data() { return { positiveNumber: '' }; }, watch: { positiveNumber(newValue) { this.positiveNumber = newValue.replace(/[^0-9.]/g, '') .replace(/^\.+|[^\d]+\./g, '') .replace(/\.{2,}/g, '.') .replace(/^\./g, '') .match(/^\d+(\.\d{0,2})?$/) ? newValue : ''; } } ``` 对应模板部分： ```html <el-input v-model="positiveNumber" placeholder="请输入正整数或正小数"></el-input> ``` 这种方法的优势在于逻辑清晰，便于后续扩展和调试[^4]。 --- #### 方法三：结合表单验证规则实现 如果需要更加严格的校验反馈，可以将正则集成到 Element UI 的表单验证规则中。 ##### 示例代码 ```javascript data() { return { form: { positiveField: '' }, rules: { positiveField: [ { required: true, message: '此项不能为空', trigger: ['blur', 'change'] }, { pattern: /^\d+(\.\d{0,2})?$/, message: '只能输入正整数或正小数', trigger: ['blur', 'change'] } ] } }; } ``` 对应模板部分： ```html <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="positiveField"> <el-input v-model="form.positiveField" placeholder="请输入正整数或正小数"></el-input> </el-form-item> </el-form> ``` 这种方案适合需要向用户提供明确错误提示的场景[^2]。 --- ### 总结 上述三种方法各有优劣： - **方法一** 更加简洁直观，但可能因频繁调用而导致性能问题； - **方法二** 将逻辑分离到 Vue 的响应式系统中，更适合大型项目； - **方法三** 利用了 Element UI 的内置功能，提供了更好的用户体验。 根据实际需求选择合适的实现方式即可满足对 `<el-input>` 输入框的正整数和正小数限制要求。 ---