欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 明星 > el-input 限制只能输入非负数字和小数

el-input 限制只能输入非负数字和小数

2025/9/28 17:54:25 来源:https://blog.csdn.net/XYX8958/article/details/147385717  浏览:    关键词:el-input 限制只能输入非负数字和小数

只允许输入框输入数字和小数,并且不能为负数

下面代码举例:

使用 @input 和正则表达式

<template><el-input v-model="adjustForm.paidinAmount" @input="handleInput"></el-input>
</template><script>
export default {data() {return {adjustForm: {paidinAmount: "",},};},methods: {handleInput(value) {// 使用正则表达式过滤掉非数字和小数点的字符this.adjustForm.paidinAmount = value.replace(/[^0-9.]/g, '');// 确保只保留一个小数点const parts = this.adjustForm.paidinAmount.split('.');if (parts.length > 2) {this.adjustForm.paidinAmount = parts[0] + '.' + parts[1];}}}
}
</script>

结合正则表达式和最大长度限制

如果还需要限制小数点后的位数(例如最多两位小数),可以对正则表达式稍作调整:

<template><el-input v-model="adjustForm.paidinAmount" @input="handleInput"></el-input>
</template><script>
export default {data() {return {adjustForm: {paidinAmount: "",},};},methods: {handleInput(value) {// 仅允许数字和一个小数点,并限制小数点后最多两位this.adjustForm.paidinAmount = value.replace(/[^0-9.]/g, ''); // 去除非数字和小数点const parts = this.adjustForm.paidinAmount.split('.');if (parts.length > 2) {// 如果有多个小数点,只保留第一个小数点this.adjustForm.paidinAmount = parts[0] + '.' + parts[1];}if (parts[1] && parts[1].length > 2) {// 如果小数点后超过两位,截断this.adjustForm.paidinAmount = parts[0] + '.' + parts[1].slice(0, 2);}}}
}
</script>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词