vue限制输入框只能输入数字和一个小数点,并可保留小数点后任意位

 <template>
	 <el-input v-model="financeScale"  @input="financeScale=formatDecimal(financeScale,2)" placeholder="请输入">
	 </el-input>
 <template/>
export default{
	data(){
	return {
		financeScale:''
	},
	methods:{
		formatDecimal (str, num) {//str当前输入值,num是想要保留的小数位数
		  str = String(str)
		  if (!str.trim()) {
		    return str
		  }
		  var len1 = str.substr(0, 1)
		  var len2 = str.substr(1, 1)
		  // 如果第一位是0,第二位不是点,就用数字把点替换掉
		  if (str.length > 1 && len1 === 0 && len2 !== '.') {
		    str = str.substr(1, 1)
		  }
		  // 第一位不能是.
		  if (len1 === '.') {
		    str = ''
		  }
		  // 限制只能输入一个小数点
		  if (str.indexOf('.') !== -1) {
		    var str_ = str.substr(str.indexOf('.') + 1)
		    if (str_.indexOf('.') !== -1) {
		      str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)
		    }
		  }
		  // 正则替换
		  str = str.replace(/[^\d^.]+/g, '') // 保留数字和小数点
		  if (num || num === 0) {
		    var rest = str.split('.')[1]
		    if (rest && rest.length > num) {
		      rest = rest.substr(0, num)
		      str = str.split('.')[0] + '.' + rest
		    }
		  }
		  return str
		}
	}
}
### ElementUI Input 组件实现数字校验保留小数 为了使 ElementUI 的 `el-input` 输入框仅允许输入数字自动保留小数点后两,可以采用以下方式: #### 方法一:通过正则表达式过滤非法字符 可以通过监听 `input` 事件,在每次用户输入时动态验证数据合法性,利用正则表达式移除非数字字符以及多余的数。 ```vue <template> <el-input v-model="value" @input="handleInput"></el-input> </template> <script> export default { data() { return { value: '' }; }, methods: { handleInput(value) { this.value = value.replace(/^\.+|[^\d.]/g, '').replace(/(\..*?)\..*/g, '$1'); // 移除多余的小数部分[^3] if (this.value.includes('.')) { // 如果存在小数点,则截取到最多两小数 const parts = this.value.split('.'); if (parts[1].length > 2) { this.value = `${parts[0]}.${parts[1].slice(0, 2)}`; } } else if (!/^-?\d+$/.test(this.value)) { // 非法字符处理 this.value = ''; } } } }; </script> ``` 此方法的核心在于实时监控用户的输入行为通过正则表达式清理不符合条件的内容。它能够有效防止用户手动输入数字字符或超出规定范围的小数数[^3]。 --- #### 方法二:使用 `el-input-number` 控制精度 如果希望更简单地控制数值的最小值、最大值精确度(即保留小数),可以直接使用 `el-input-number` 组件替代普通的 `el-input`。该组件内置了对数值的操作支持,适合用于需要严格限制输入场景的情况。 ```vue <template> <el-form-item label="金额"> <el-input-number v-model="amount" :min="0" :max="999999.99" :step="0.01" :precision="2" controls-position="right" ></el-input-number> </el-form-item> </template> <script> export default { data() { return { amount: 0, }; } }; </script> ``` 上述代码片段展示了如何配置 `el-input-number` 来限定输入值为非负浮点数,且强制保留至多两小数。其中参数解释如下: - `v-model`: 数据绑定变量; - `:min`, `:max`: 定义可接受数值区间; - `:step`: 步长设置,默认增量单; - `:precision`: 小数点后的固定长度; - `controls-position`: 调整增减按钮置[^2]。 这种方法无需额外编写逻辑来管理格式化规则,因此更加简洁高效,但可能不适用于某些特定需求下的高度自定义功能开发。 --- ### 性能对比分析 | **特性** | **方法一 (`el-input`) 自定义逻辑** | **方法二 (`el-input-number`) 内置控件** | |------------------------|-------------------------------------------------------|-----------------------------------------------| | 易用性 | 较低 | 高 | | 灵活性 | 极高 | 中等 | | 开发成本 | 增加 | 减少 | | 用户体验优化 | 支持完全定制化的交互 | 默认样式较为局限 | 对于大多数常规业务而言,推荐优先选用第二种方案以减少不必要的复杂性维护负担;而对于特殊情况下需进一步增强用户体验或者满足独特规格的要求,则可以选择第一种基于原生 `el-input` 扩展的方式完成目标[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值