推荐！ el-input 输入框类型；只能输入数字的输入框；保留两位小数输入框；只能输入正整数和0的输入框；手机号正则校验；车牌号码正则校验

特殊的正则校验

去除多余的0看这篇

以下代码可直接复制使用：

以下代码可直接复制使用！

<template>
  <div>
    <a href="https://baike.baidu.com/item/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1700215?fr=aladdin#10">百度正则</a>
    <el-input v-model="text1" placeholder="请输入内容"></el-input>
    <el-input v-model="text1" placeholder="可清空" clearable></el-input>
    <el-input v-model.trim="text1" placeholder="自动清除两测空格"></el-input>

    <el-input v-model.trim="num1" placeholder="只是输入正整数和0" @input="changeInputNum(num1)"></el-input>
    <el-input v-model.trim="num2" placeholder="只是输入正整数和0且最多六位" @input="changeInputSix(num2)"></el-input>

    <!-- type="number" 会有上下按钮 且可以输入任何数据  如果想要限制其他条件 就加方法 -->
    <el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数" @input.native="changeInputP($event, num3,)"></el-input>
    <el-input v-model.trim="num3" placeholder="只能输入0和正整数和两位的小数 有上下按钮" type="number" @input.native="changeInputP($event, num3,)"></el-input>

    <!-- 默认数字输入会自动补齐小数点 还会自动四舍五入 -->
    <el-input-number v-model="num5" :precision="2" :step="0.01" :max="10" placeholder="0正负数 最多两位小数"></el-input-number>
    <!-- 去掉加减按钮 去掉自动补齐小数点属性precision 去掉四舍五入 -->
    <el-input-number v-model="num6" :step="0.01" placeholder="0正负数 最多两位小数" class="num_input" @input.native="changeInputPt2($event)"></el-input-number>

    <el-input v-model.trim="num3" placeholder="任何数据" type="number" class="wan_input">
      <template slot="append">万</template>
    </el-input>

    <el-input v-model.trim="num3" placeholder="任何数据" type="number">
    </el-input>

    <el-input-number v-model="num4" label="可以输入任何数字"></el-input-number>

    <el-input v-model="v2" type="text" placeholder="0到9数字或英文或0到9数字加英文" @input="changeNumOrEnglish"></el-input>
    <el-input v-model="v3" type="text" placeholder="只能英文" @input="changeEnglish"></el-input>

    <el-input v-model="carId" type="text" placeholder="车牌号码 京AAAAAA  京A9999警" @input="changeCar"></el-input>
    <div>{{ carMsg }}</div>

    <el-input v-model="mobile" type="text" placeholder="手机号" @input="changeMobile"></el-input>
    <div>{{ mobileMsg }}</div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      text1: '',

      num1: '',
      num2: '',
      num3: '',
      num4: '',
      num5: undefined,
      num6: undefined,
      v2: '',
      v3: '',
      carId: '',
      carMsg: '', // 车牌号码正确错误提示
      mobile: '',
      mobileMsg: ''

    }
  },
  methods: {
    changeInputNum (val) {
      if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {
        // 不满足
        this.num1 = ''
        val = ''
      }
    },
    changeInputSix (val) {
      if (!(/^[1-9]\d*$/.test(val) || val - 0 === 0)) {
        // 不满足
        this.num2 = ''
        val = ''
      } else {
        if (val.length > 6) {
          // 不满足
          this.num2 = val.substring(0, 6)
          val = this.num2
        }
      }
    },
    changeInputP (e, val) {
      console.log(e, val)
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null
      // console.log(e.target.value)
      this.num3 = e.target.value
      val = e.target.value
    },
    changeInputPt2 (e) {
      console.log(e.target.value)
      if ((e.target.value.indexOf('.') >= 0)) {
        e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3) // 这里采用截取 既可以限制第三位小数输入 也解决了数字输入框默认四舍五入问题
      }
      console.log(e.target.value)
    },
    changeNumOrEnglish (e) {
      if (!((/^[0-9]*$/.test(e)) || (/^[A-Za-z]+$/.test(e)) || (/^[A-Za-z0-9]+$/.test(e)))) {
        e = ''
        this.v2 = ''
      }
    },
    changeEnglish (e) {
      if (!(/^[a-zA-Z]*$/.test(e))) {
        e = ''
        this.v3 = ''
      }
    },
    changeCar (e) {
      var result = false
      if (e.length === 7) {
        // 常规车牌是7位时候规则为： 省份简称或大写字母共1位+大写字母共1位+大写字母或者数字共4位+大写字母或数字或特殊汉字1位  例如:AAAAAAA  京A9999警
        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
        result = express.test(e) // 满足条件时候 正则结果是true
      } else if (e.length === 8) {
        // 新能源车牌号 8位：省份简称（1位汉字）+发牌机关代号（1位字母）+序号（6位）
        var express2 = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9挂学警港澳]{1}$/
        result = express2.test(e)
      }
      if (result) {
        console.log('正确车牌号码')
        this.carMsg = '正确车牌号码'
      } else {
        console.log('错误车牌号码')
        this.carMsg = '错误车牌号码'
      }
    },
    changeMobile (e) {
      var flagTel = false
      flagTel = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/.test(e)
      if (flagTel) {
        console.log('正确手机号')
        this.mobileMsg = '正确手机号'
      } else {
        console.log('错误手机号')
        this.mobileMsg = '错误手机号'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 400px;
  display: block;
  margin: 10px 500px;
}
.el-input-number {
  .el-input {
    width: 180px;
    margin: 0;
  }
}

// 内部插槽位置大小自己调整
.el-input-group__append {
  float: left;
  height: 40px;
  box-sizing: border-box;
  margin: -40px 356px;
}

.wan_input{
  position: relative;
  /deep/.el-input-group__append{
    position: absolute;
    right: 0;
    top: 0;
    height: 38px;
    border-radius:0 3px 3px  0;
    line-height: 38px;
    text-align: center;
  }
}

.num_input {
  /deep/.el-input-number__decrease,
  /deep/.el-input-number__increase {
    display: none !important;
  }
  /deep/.el-input__inner {
    padding: 0 !important;
  }
}
</style>