项目需求el-input组件输入的时候使用v-model.number="value"
一开始可以输入任何字符。除非第一次输入为数字,后面输入的内容才会被限制,只能输入数字。这个并不符合需求。
我们要实现如下功能:
1.必须为数字
2.只能有一个小数点
3.小数点后保留两位小数
4.当第一位输入小数点的时候自动补全,补为 0.
5.除非是小数,否则数字不能以0开头
一、绑定input
事件对输入的内容进行自定义过滤
<el-input placeholder="售价" @input="limitInput($event, 'sellingPrice')" v-model.trim="form.sellingPrice">
</el-input>
/**
* @param {string} value - 输入的值
* @param {string} name - 匹配的对象属性
*/
limitInput(value, name) {
let dat =
("" + value) // 第一步:转成字符串
.replace(/[^\d^\.]+/g, "") // 第二步:把不是数字,不是小数点的过滤掉
.replace(/^0+(\d)/, "$1") // 第三步:第一位0开头,0后面为数字,则过滤掉,取后面的数字
.replace(/^\./, "0.") // 第四步:如果输入的第一位为小数点,则替换成 0. 实现自动补全
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步:最终匹配得到结果 以数字开头,只有一个小数点,而且小数点后面只能有0到2位小数
// 限制输入最大值为100
if (Number(dat) >= 100) {
return;
}
this.form[name] = dat;
},
二、利用 Onkeyup 事件
<el-input
Onkeyup="this.value=this.value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,2}/);this.dispatchEvent(new Event('input'))"
v-model.trim="form.test"
></el-input>
参考链接:https://www.jianshu.com/p/75df2814be0e
其他正则记录
1、金额的正则表达式校验(校验input输入框的内容为金额,不能为负数,保留两位小数)
var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
2、输入框限制只能输入数字
Oninput="value=value.replace(/[^0-9]/g,'')"