vue element組件庫(kù)<el-input>限制只能輸入數(shù)字，且保留小數(shù)后兩位
項(xiàng)目需求el-input組件輸入的時(shí)候使用v-model.number="value"一開始可以輸入任何字符。除非第一次輸入為數(shù)字焊切，后面輸入的內(nèi)容才會(huì)被限制，只能輸入數(shù)字芳室。這個(gè)并不符合需求专肪。
我們要實(shí)現(xiàn)如下功能：
- 必須為數(shù)字
- 只能有一個(gè)小數(shù)點(diǎn)
- 小數(shù)點(diǎn)后保留兩位小數(shù)
- 當(dāng)?shù)谝晃惠斎胄?shù)點(diǎn)的時(shí)候自動(dòng)補(bǔ)全，補(bǔ)為 0.
- 除非是小數(shù)堪侯，否則數(shù)字不能以0開頭
最終考慮通過綁定input事件對(duì)輸入的內(nèi)容進(jìn)行自定義過濾嚎尤，可以使用多種方式進(jìn)行匹配，這里我舉兩種方式：
- 第一種為字符串切割匹配
- 第二種完全使用正則匹配
1. typescript字符串切割匹配版本
<template>
<div class="about">
<el-input placeholder="市場(chǎng)價(jià)" @input="limitInput($event,'mkPrice')" v-model.trim="form.mkPrice" />
<el-input placeholder="零售價(jià)" @input="limitInput($event,'slPrice')" v-model.trim="form.slPrice" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class About extends Vue {
/**
* 自有屬性伍宦，定義后會(huì)在生成在construct構(gòu)造器內(nèi)容
*/
form: any = {
mkPrice: 0,
slPrice: 0,
};
/**
* methods
*/
// ts版本
limitInput(value: string, name: string) {
let str = (value && value.split("")) || [];
let reg1 = /\d/;
let reg2 = /\./;
// 第一個(gè)字符不能為小數(shù)點(diǎn)
if (str[0] == ".") {
this.form[name] = "";
return;
}
// 過濾掉除數(shù)字和小數(shù)點(diǎn)外的字符
value = str.filter((e: string) => reg1.test(e) || reg2.test(e));
// 匹配小數(shù)點(diǎn)后只能有兩位小數(shù)
let valJoin: any = value.join("");
this.form[name] = valJoin.match(/^\d*(\.?\d{0,2})/g)[0] || null;
}
}
</script>
2. JavaScript字符串切割匹配版本
<template>
<div class="about">
<el-input placeholder="市場(chǎng)價(jià)" @input="limitInput($event,'mkPrice')" v-model.trim="form.mkPrice" />
<el-input placeholder="零售價(jià)" @input="limitInput($event,'slPrice')" v-model.trim="form.slPrice" />
</div>
</template>
<script>
export default {
data() {
return {
form: {
mkPrice: "",
slPrice: "",
},
};
},
methods: {
limitInput(value, name) {
let val = (value && value.split("")) || [];
let reg1 = /\d/;
let reg2 = /\./;
// 第一個(gè)字符不能為小數(shù)點(diǎn)
if (val[0] == ".") {
this.form[name] = "";
return;
}
// 過濾掉除數(shù)字和小數(shù)點(diǎn)外的字符
val = str.filter((e) => reg1.test(e) || reg2.test(e));
// 匹配小數(shù)點(diǎn)后只能有兩位小數(shù)
// 解釋一下這個(gè)match正則規(guī)格
// ^\d* 是指以數(shù)字開頭芽死，后面允許輸入0到多位數(shù)字
// (\.?) 是指只允許一個(gè)小數(shù)點(diǎn)
// \d{0,2} 是指只允許0到2位小數(shù)
this.form[name] = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || null;
},
},
};
</script>
3. typescript正則匹配版本
<template>
<div class="about">
<el-input placeholder="市場(chǎng)價(jià)" @input="limitInput($event,'mkPrice')" v-model.trim="form.mkPrice" />
<el-input placeholder="零售價(jià)" @input="limitInput($event,'slPrice')" v-model.trim="form.slPrice" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class About extends Vue {
/**
* 自有屬性乏梁，定義后會(huì)在生成在construct構(gòu)造器內(nèi)容
*/
form: any = {
mkPrice: 0,
slPrice: 0,
};
/**
* methods
*/
// ts版本
limitInput(value: string, name: string) {
let val: any = "" + value;
val =
val
.replace(/[^\d^\.]+/g, "")
.replace(/^0+(\d)/, "$1")
.replace(/^\./, "0.")
.match(/^\d*(\.?\d{0,2})/g)[0] || "";
this.form[name] = val
}
}
</script>
4. javascript 正則匹配版本
<template>
<div class="about">
<el-input placeholder="市場(chǎng)價(jià)" @input="limitInput($event,'mkPrice')" v-model.trim="form.mkPrice" />
<el-input placeholder="零售價(jià)" @input="limitInput($event,'slPrice')" v-model.trim="form.slPrice" />
</div>
</template>
<script>
export default {
data() {
return {
form: {
mkPrice: "",
slPrice: "",
},
};
},
methods: {
/**
* @param {string} value - 輸入的值
* @param {string} name - 匹配的對(duì)象屬性 [mkPrice | slPrice]
*/
limitInput(value, name) {
this.form[name] =
("" + value) // 第一步：轉(zhuǎn)成字符串
.replace(/[^\d^\.]+/g, "") // 第二步：把不是數(shù)字，不是小數(shù)點(diǎn)的過濾掉
.replace(/^0+(\d)/, "$1") // 第三步：第一位0開頭关贵，0后面為數(shù)字遇骑，則過濾掉，取后面的數(shù)字
.replace(/^\./, "0.") // 第四步：如果輸入的第一位為小數(shù)點(diǎn)揖曾，則替換成 0. 實(shí)現(xiàn)自動(dòng)補(bǔ)全
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最終匹配得到結(jié)果 以數(shù)字開頭落萎，只有一個(gè)小數(shù)點(diǎn)，而且小數(shù)點(diǎn)后面只能有0到2位小數(shù)
},
},
};
</script>
