车牌号专用键盘设计和正则验证

在做和汽车相关的项目的时候，可能会遇到自定义车牌键盘的情况，我们知道，汽车车牌有省份简称和后面的字母数字构成，而且现在新兴的新能源汽车的车牌和传统车牌还有些差距，如果需要对车牌号进行输入校验，需要的正则表达式就比较麻烦，这里笔者做了一个和汽车相关的小项目，正好需要用到自定义车牌键盘和车牌号正则校验。
下面先看一下简单的效果图：

这里设计了一个车牌号专用输入键盘，而且车牌号添加了一个新能源车牌输入选项，新能源汽车的车牌要比传统车牌多出一位数。
下面简单看一下body中的结构代码：

<body><div id="container"><div id="carLicenseBox"><div class="carLicenseTitle">请输入车牌号</div><div class="carLicenseMain"><ul><li class="active">省</li><li></li><li></li><li></li><li></li><li></li><li></li><li class="xinnengyuan"></li></ul></div><button class="submitBtn" id="submitBtn" disabled="true">提交</button></div><div id="keyboardBox"><div class="provienceBox" id="provienceBox"><ul><li>京</li><li>津</li><li>渝</li><li>沪</li><li>冀</li><li>晋</li><li>辽</li><li>吉</li><li>黑</li><li>苏</li></ul><ul><li>浙</li><li>皖</li><li>闽</li><li>赣</li><li>鲁</li><li>豫</li><li>鄂</li><li>湘</li><li>粤</li><li>琼</li></ul><ul><li>川</li><li>贵</li><li>云</li><li>陕</li><li>甘</li><li>青</li><li>蒙</li><li>桂</li><li>宁</li><li>新</li></ul><ul><li class="changeContentBtn other">ABC</li><li>藏</li><li>使</li><li>领</li><li>警</li><li>学</li><li>港</li><li>澳</li><li class="deleteBtn other"><img src="img/backDeleteImg.jpg"/></li></ul></div><div class="textBox" id="textBox"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li></ul><ul><li>Q</li><li>W</li><li>E</li><li>R</li><li>T</li><li>Y</li><li>U</li><li>I</li><li>O</li><li>P</li></ul><ul><li>A</li><li>S</li><li>D</li><li>F</li><li>G</li><li>H</li><li>J</li><li>K</li><li>L</li></ul><ul><li class="changeContentBtn other">返回</li><li>Z</li><li>X</li><li>C</li><li>V</li><li>B</li><li>N</li><li>M</li><li class="deleteBtn other"><img src="img/backDeleteImg.jpg"/></li></ul></div></div></div></body>

从代码中可以看到，结构相对来说很简单，主要用到ul li标签，重点是对css样式的编写和键盘的逻辑处理。这里css样式不做展示。
键盘的控制逻辑也不是很难，读者可简单参照下面的代码：

/*** 自定义键盘处理函数* */
function keyboard(num, self) {var index = getIndex();disabledBtn(index);if(index <= num) {if(index == num) {$('.carLicenseMain ul li.active').html($(self).html());} else {$('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');}$('#textBox').show();$('#provienceBox').hide();}
}
/*** 获取当前车牌数字索引* */
function getIndex() {var index = 0;$('.carLicenseMain ul li').each(function() {var reg = new RegExp('active');if(reg.test($(this).attr('class'))) {index = $(this).index();}})return index;
}
//切换键盘$('.changeContentBtn').click(function() {if($(this).html() == 'ABC') {$('#textBox').show();$('#provienceBox').hide();} else {$('#textBox').hide();$('#provienceBox').show();}})//省份键盘点击事件$('#provienceBox ul li:not(.other)').click(function() {var self = this;keyboard(num, self);})//文本键盘点击事件$('#textBox ul li:not(.other)').click(function() {var self = this;keyboard(num, self);})//回退按钮点击事件$('.deleteBtn').click(function() {var index = getIndex();if(index == num) {if($('.carLicenseMain ul li.active').html() != '') {$('.carLicenseMain ul li.active').html('');} else {if(index == 7) {$('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');num = 6;}$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');}} else if(index < num && index > 1) {$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');} else if(index == 1) {$('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省');}disabledBtn(getIndex()-1);})

如果读者想要处理车牌号的正则校验，就需要考虑到现在的新能源汽车，因为新能源汽车和传统汽车的车牌还有有着不少的区别，做正则校验的话会麻烦一些，这里笔者是这样校验的，如果有什么不对的地方欢迎笔者留言：

/^([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领][a-zA-Z](([DF](?![a-zA-Z0-9]*[IO])[0-9]{4})|([0-9]{5}[DF])))|([冀豫云辽黑湘皖鲁苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼渝京津沪新京军空海北沈兰济南广成使领A-Z]{1}[a-zA-Z0-9]{5}[a-zA-Z0-9挂学警港澳]{1})$/

感兴趣的读者可以去这里下载完整项目代码：
github相关项目链接

车牌号专用键盘设计和正则验证相关推荐

小程序组件库开发之车牌号专属键盘
小程序开发过程中可能会碰到和车牌信息相关的开发,这时候就需要输入车牌号,传统的键盘输入车牌号,需要打出汉字,再选择相应的字母数字,并不是特别方便,这里笔者专门开发了车牌号键盘,可以任意选择修改省份,数 ...
小程序车牌号模拟虚拟键盘选择。车牌号虚拟键盘。作为组件使用
这里是作为组件使用的. 1.新建组件carCity 组件wxml书写 <view class='car'><view bindtap='showCity' class='carNo ...
小程序验证车牌号（含新能源车牌）
之前写的一个,小程序扫描二维码,正则校验:https://www.jianshu.com/p/61217e42a143,现在又遇到了一个小程序验证车牌号(含新能源车牌)的需求,其实思想是类似的,一并写 ...
基于Python实现随机车牌号程序
资源下载地址:https://download.csdn.net/download/sheziqiong/85617158 1. 课程设计目的 <软件设计基础-Python>课程设计是这门 ...
vue +vant 车牌号输入
最近写了一个预进出场的需求 1.HTML <template><div class="keyboard"><div class="numbe ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...
最常用的几个数据验证正则判断，手机号，车牌号，身份证，Email,IP
*** 对手机号码进行校验 *** * 移动号段: 134 135 136 137 138 139 147 148 150 151 152 157 158 159 172 * 178 182 183 ...
PHP 正则验证车牌号、判断车牌号是否合法
/** Notes: 判断车牌号是否合法* @param: $license 车牌号* return bool true:合法 false:不合法*/ public function isCarLic ...
java汽车牌号验证_正则验证车牌号码，包括新能源车牌
正则验证 20180818 直接上代码 // 正则验证车牌,验证通过返回true,不通过返回false function isLicensePlate(str) { return /^(([京津沪渝冀 ...

车牌号专用键盘设计和正则验证

车牌号专用键盘设计和正则验证相关推荐

最新文章

热门文章