在实际开发中,涉及到金额并且存在很严格的校验规则的情况下,为了更好的用户体验,从而写了下面的,代码
首先下面是,element组件的具体代码
<div class="class-box-input">
<el-input placeholder="请输入内容" @input="handleInput" style="width: 300px;" maxlength="7" v-model="input" clearable></el-input>
</div>
js代码:实际就是使用了js中的正则匹配,然后替换
handleInput(v) {
let cleanedValue = v.replace(/[^\d.]/g, '');//移除非数字和小数点
cleanedValue = cleanedValue.replace(/^0\d+/g, '');//当输入第二个00的时候直接清空输入框
if (/\.\d+\./.test(cleanedValue)) {//当输入多个小数点匹配其数字和小数点组合
cleanedValue = cleanedValue.replace(/\.\d+\./g, '.'); // 移除中间的数字和小数点组合
}
let parts = cleanedValue.split('.');//分割小数点
if (parts.length === 2) {
this.input = `${parts[0].replace(/^0+(\d)/, '$1')}.${parts[1].slice(0, 2)}`;
} else {
const firstDigit = cleanedValue.match(/\d/);
if (firstDigit && firstDigit[0] !== '0') {
this.input = cleanedValue.endsWith('.') ? cleanedValue : cleanedValue;
} else {
this.input = firstDigit ? cleanedValue.replace(/^0+(\d)/, '$1') : cleanedValue.slice(1);
}
}
console.log(this.input, '+++++++++++');
},
为了更好的用户体验,采取了直接限制用户输入的价格,直接清空输入框,此输入框可输入,小数、整数,不可输入英文,与不合法的数字
下面是效果图: