微信小程序自定义车牌号输入键盘效果-案例

自定义车牌号输入键盘 

 微信小程序验证车牌号是否正确 

let carId = this.data.carId
let reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
const careg = reg.test(carId);
if (!careg) {
  wx.showToast({
	icon: 'none',
	title: '请输入正确车牌号',
  })
  return;
}

<!--pages/text/index.wxml-->
<mp-navigation-bar loading="{
  {loading}}" show="{
  {show}}" animated="{
  {animated}}" color="{
  {color}}"
  background="{
  {background}}" title="键盘" back="{
  {true}}"></mp-navigation-bar>

<view class="yardName">请添加真实有效的车牌号码</view>
<view class="plate-input-body">
  <view class="plate-input-content" wx:if="{
  {flag}}">
    <view class="{
  {inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="0">{
  {inputPlates.index0}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="1">{
  {inputPlates.index1}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="2">{
  {inputPlates.index2}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="3">{
  {inputPlates.index3}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="4">{
  {inputPlates.index4}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="5">{
  {inputPlates.index5}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="6">{
  {inputPlates.index6}}</text>
    </view>
  </view>
  <view class="new-plate-input-content" wx:else="">
    <view class="{
  {inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="0">{
  {inputPlates.index0}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="1">{
  {inputPlates.index1}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="2">{
  {inputPlates.index2}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="3">{
  {inputPlates.index3}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class="plate-num-text" data-id="4">{
  {inputPlates.index4}}</text>
    </view>
    <view class="{
  {inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
      <text bindtap="inputClick" class=