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

最新推荐文章于 2024-07-23 15:31:31 发布

小圣贤君

最新推荐文章于 2024-07-23 15:31:31 发布

阅读量9.2k

点赞数 2

分类专栏：前端开发文章标签：车牌号正则表达式车牌号键盘正则表达式车牌号

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/73823834

版权

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

这里设计了一个车牌号专用输入键盘，而且车牌号添加了一个新能源车牌输入选项，新能源汽车的车牌要比传统车牌多出一位数。
下面简单看一下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>
                        <