vue 正则表达式，只能输入正整数，且首位不能是 0
适用场景，手机号正则验证，优惠券张数验证等
不使用框架的原生input实现
<template>
<div>
<input v-model="valueData" placeholder="正则验证测试表单" />
<span>只能输入正整数，且首位不能为0</span>
</div>
</template>
<script>
export default {
data() {
return {
valueData: '',
}
},
watch: {
valueData(newNum, oldNum) {
this.valueData = this.valueData.replace(/\D/g, '')
this.valueData = this.valueData == 0 ? '' : this.valueData
},
},
}
</script>
使用ant design vue框架的a-input实现
<template>
<div>正则<a-input @change="handleChange" v-model="value"></a-input></div>
</template>
<script>
export default {
data() {
return {
innerPhoneNum: 0,
value:0
};
},
methods: {
handleChange(e)
// e非空处理
this.innerPhoneNum = e.target ? e.target.value : "";
this.value = this.innerPhoneNum.replace(/^0|\D/g, "");
},
},
};
</script>
正则表达式，只能输入小数点后两位，且首位不能是 0
适用场景，金额的输入等
<template>
<div>使用<a-input @change="handleChange" v-model="value"></a-input></div>
</template>
<script>
export default {
data() {
return {
value: "",
};
},
methods: {
// a-input API函数
handleChange(e) {
// 定义整数部位最大输入长度
let length = 6;
// 数值中转
let temp = this.value;
// 限制首位输入00000多个零的情况
if (temp === "0" || temp === "00") {
return (temp = "0");
}
// 正则限制 3.. 以及 3.3.3的情况
temp = temp
.replace(/[^0-9.]|^\.|\.{2,}/g, "")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
const point = temp.split(".");
let decimals; // 整数部分
let positiveInteger; // 小数部分
// 先处理整数部分
if (point[0]) {
decimals =
point[0].length > length ? point[0].slice(0, length) : point[0];
}
// 处理小数部分
if (temp.includes(".")) {
positiveInteger =
point[1].length > 2 ? point[1].slice(0, 2) : point[1];
temp = positiveInteger
? `${
decimals}.${
positiveInteger}`
: `${
decimals}.`;
} else {
temp = decimals;
}
this.value = temp;
},
},
};
</script>