需求:只能输入数字和小数点,小数点保留两位,最大长度不超过10
<el-form-item label="价格">
<el-input v-model.number="formLabelAlign.price" type="tel" @input="checkVal($event)"></el-input>
</el-form-item>
这里用v-model的number修饰符不用type=number,是因为用后者可以输入‘e’
checkVal(value) {
console.log(11111);
let data =
("" + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
if (data.length > 10) {//最大输入长度为10
data = data.slice(0, 10)
this.formLabelAlign.price = data;
} else {
this.formLabelAlign.price = data;
}
},
成功实现