input输入框校验只能输入数字或者小数校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了input输入框校验只能输入数字或者小数校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html部分：
 <el-input v-model="number" @input="hanldeInuptRules"></el-input>
script：
const hanldeInuptRules = () => {
    number.value = number.value.replace(/[^\d.]/g, '').replace(/^0+(\d)/, '$1').replace(/^\./, '0.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^\./g, '');
}

解释：
让我们逐步解释这段代码的每个步骤：

number.value.replace(/[^\d.]/g, ''): 这一步使用正则表达式 /[^\d.]/g，将 number.value 中除了数字和小数点以外的字符都替换为空字符串，即去除非数字和小数点的字符。
.replace(/^0+(\d)/, '$1'): 这一步使用正则表达式 /^0+(\d)/，将 number.value 中以零开头的数字去除多余的零，只保留一个零作为整数的起始。
.replace(/^\./, '0.'): 这一步使用正则表达式 /^\./，将 number.value 中以小数点开头的情况，添加一个前置的零，确保小数点前有数字。
.replace('.', '$#$'): 这一步将小数点先替换为特殊字符串 '$#$'。
.replace(/\./g, ''): 这一步使用正则表达式 /\.g/，将 number.value 中所有的小数点去除，以避免多个小数点的情况。
.replace('$#$', '.'): 这一步将之前替换为特殊字符串的小数点还原回为正常的小数点。
.replace(/^\./, ''): 这一步使用正则表达式 /^\./，将 number.value 中以小数点开头的情况去除小数点，确保小数点前有数字。