vue常用正则表达式，只能输入纯数字，且首位不能是0，只能输入小数点后两位数字

╰半橙微兮° 2022-11-21 15:13 863阅读 0赞

## 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>