正则校验 任意正整数,正小数(小数点不超2位)

正则校验 任意正整数,正小数(小数点不超2位)

function checkReg (str) {
  if (str === '') {
    return true
  }
  let reg = /^(([0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/// 任意正整数,正小数(小数位不超过2位)
  return reg.test(str)
}
### 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>` 输入框的正整数小数限制要求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值