当前位置：首页 > uni-app

uniapp车牌号输入

2026-02-06 18:28:47uni-app

实现车牌号输入功能

在UniApp中实现车牌号输入功能，可以通过自定义输入组件或使用第三方插件。以下是一种常见的实现方式：

使用<input>组件结合正则表达式验证

<template>
  <view>
    <input 
      type="text" 
      v-model="plateNumber" 
      @input="formatPlateNumber"
      placeholder="请输入车牌号"
      maxlength="8"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      plateNumber: ''
    }
  },
  methods: {
    formatPlateNumber() {
      // 去除所有非字母数字字符
      this.plateNumber = this.plateNumber.replace(/[^a-zA-Z0-9]/g, '')

      // 自动添加空格分隔省份和号码
      if (this.plateNumber.length > 1) {
        this.plateNumber = 
          this.plateNumber.substring(0, 1) + ' ' + 
          this.plateNumber.substring(1)
      }
    }
  }
}
</script>

车牌号验证正则表达式

对于中国大陆车牌号验证，可以使用以下正则表达式：

// 普通车牌
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/

// 新能源车牌
/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z](?:[0-9]{5}[DF]|[DF][A-HJ-NP-Z0-9][0-9]{4})$/

使用第三方组件

可以考虑使用以下第三方组件：

uni-plate-keyboard：带车牌键盘的输入组件
mpvue-city-picker：支持车牌省份选择

安装示例：

npm install uni-plate-keyboard --save

使用示例：

<template>
  <view>
    <plate-input 
      v-model="plateNumber"
      @confirm="handleConfirm"
    />
  </view>
</template>

自定义键盘实现

如需实现专用车牌键盘：

uniapp车牌号输入

<template>
  <view>
    <input 
      v-model="plateNumber"
      @focus="showKeyboard = true"
    />

    <view v-if="showKeyboard" class="keyboard">
      <!-- 省份简称按钮 -->
      <view class="row">
        <button v-for="prov in provinces" @click="addProvince(prov)">
          {{ prov }}
        </button>
      </view>

      <!-- 字母数字键盘 -->
      <view class="row">
        <button v-for="char in chars" @click="addChar(char)">
          {{ char }}
        </button>
      </view>
    </view>
  </view>
</template>