APICloud AVM框架封装身份证号码虚拟输入键盘组件

关注

原创 2022-08-09 14:23:27 709 阅读 AI 写同款· GEO 优化 ›

身份证阅读器web开发示例，支持JS/H5、React、Vue.js、jQuery、Node.js、AngularJS、TypeScript、Electron、JSP、PHP、ASP等语言开发 1、最新适配支持了windows、Linux、安卓、国产系统（麒麟、统信）四大系统网页开发。3、支持身份证、社保卡、IC卡、银行卡、磁条卡等市场上常见卡类型读取识别。2、支持四种身份证类型读取。4、免驱安装，即插即用。阅读详情

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍

身份证号码虚拟输入键盘，可用以身份证号码输入时使用，可对输入的身份证号码进行验证，支持15位和18位。

示例展示

组件开发

组件文件

id-card-keyboard.stml

<template>
	<view class="id-card-keyboard_container">
		<view class="id-card-keyboard_box">
			<view class="id-card-keyboard_box-header">
				<text class="id-card-keyboard_box-header-label">{idCard}</text>
				<text class="id-card-keyboard_box-header-button" @click="finish">完成</text>
			</view>
			<safe-area>			
				<view class="id-card-keyboard_box-item-container">
					<view class="id-card-keyboard_box-item" v-for="item in numbers">
						<view class="id-card-keyboard_box-item-label" v-if="item.type=='number'" data-key={item.key} @click="getNumber">
							<text style="font-size:28px;">{item.key}</text>
						</view>
						<view class="id-card-keyboard_box-item-label" v-else-if="item.type=='ico'" @click="delNumber">
							<image class="id-card-keyboard_box-item-ico" src={item.key} mode="widthFix"></image>
						</view>						
					</view>				
				</view>	
			</safe-area>				
		</view>
	</view>
</template>
<script>
	import checkIdcard from './id-card-check.js'
	export default {
		name: 'id-card-keyboard',
		data() {
			return{
				numbers:[{type:'number',key:'1'},{type:'number',key:'2'},{type:'number',key:'3'},{type:'number',key:'4'},{type:'number',key:'5'},{type:'number',key:'6'},{type:'number',key:'7'}
				,{type:'number',key:'8'},{type:'number',key:'9'},{type:'number',key:'X'},{type:'number',key:'0'},{type:'ico',key:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAC/UlEQVRo3u2aO2gUURSGv1k1PlFXUHwUQZEYlUACPiM2KbQSKxEkBEtbHyDxAWqjoK2gqIjYWJpC0gQLQUWjoBJUtBOMiWJMwJiYiGtxdtlzx1lndr07w4X7wcBm59xzcv655752wOPxeDwej8dJggxjtwGHgHagsQ7+fwHvgJvA1QzzrAv7gUKK12NgQdZJ22J3yuKVruf1SCbtEu4Cbqm/nyEl9hKYBGZYivMbyCMP66j6/gxwNuWcrXEMs0fcSynuKRXzY9Yi1EoHpnivUoydRyaUAvApayFqYQtSUiXxPgPLUoyfA0aKsYeyFqNaOjHFewisSNCuHRm7ZiaM0wQcB1ZH3JsNfMXBHniAv5cSSQgo95gBYH6M/XJggso9bI7y54yAzZjijZB8xg+AMZKNlw3Aa2U7HGHjnIAbgO8qqTFgY5U+9mI+gNsRNguBF5jirYuwc0rAFsozXqkEV9boaxvmg3iAjGcArcCguvcIWFLBj1MCvlVJvQHm/qe/9cC48nkf2E55zCsAH2J8OCPgVsyyW2PJbwuVt2fjwNqY9s4IeBpzuWKTDmSM0+L1A6sStK2rgDmLvvLq86Dl/7MfGVs1ozi8NYuik3Lv+GbR7yxErKgSfkL8AYQzJbwolNxFCz4D4KnyOQQcDsXpjfHhjIAAR7AnYiNSuiVf75FZGWSXM63u3fiHH6cEBBFNi3i3Bh9NmLuRAWBeyKYNmMKcuKLK2TkBAS5hininyvYDqu0UsuuIohX4qWz7ImycFBDkwFSL2F1F21KbaWBzjG34rDGMswICXA4ldyVhuz2I4M0J7XcBJ4GdEfecFhDgPKaIPSnHD4AvOHqgWiI8Jl5LMXYD8oOV0wKCrNe0iCdSitulYjpZwppwOfcCO5BeEiDLEBtXDlgMHMRc6ly3nVAWr3acQw4eNMPFRG3tzQuIgPpthB/I4cNoBjlb5wLpvpUwAWyqRyK23gSolj7kxGYpUgUB0gNtXpPFGD3APuS3E4/H4/F4PB6Pxwp/AGH7f53PGS6/AAAAAElFTkSuQmCC'}],
				numberIndex:0,
				resultNumber:[],
				idCard:''
			}
		},
		methods: {		
			getNumber(e){
				// console.log(JSON.stringify(e));
				if(this.data.numberIndex<18){
					this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓
					this.data.numberIndex += 1;				
					this.data.idCard = this.data.resultNumber.join('');
				}
				
			},
			delNumber(e){
				this.data.numberIndex -= 1;	
				if(this.data.numberIndex>=0){
					this.data.resultNumber.splice(this.data.numberIndex,1);	
					this.data.idCard = this.data.resultNumber.join('');				
				}
			},
			finish(){
				if(!checkIdcard(this.data.idCard)){
					api.confirm({
						title: '提示',
						msg: '您输入的身份证号码不符合规则，是否继续使用？',
						buttons: ['确定', '取消']
					}, (ret, err)=> {
						var index = ret.buttonIndex;
						if(index==1){
							this.fire('setNumber',this.data.idCard);
						}				
					});
				}
				else{
					this.fire('setNumber',this.data.idCard);
				}					
			}
		}
	}
</script>
<style>
	.id-card-keyboard_container {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0);
	}
	.id-card-keyboard_box{
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #f0f0f0;
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
	}
	.id-card-keyboard_box-item-container{
		flex-flow:  row wrap;
		justify-content: space-around;
		align-items: center;
		padding: 10px;
		box-sizing: border-box;
	}
	.id-card-keyboard_box-item{
		flex-basis: 33%;
    	box-sizing: border-box;
		padding: 5px;
	}
	.id-card-keyboard_box-item-label{
		display: flex;
		background-color: #ffffff;
		padding: 5px;
		border-radius: 5px;
		width: 100%;
		height: 48px;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.id-card-keyboard_box-item-ico{
		width: 60px;
	}
	.id-card-keyboard_box-header{
		width: 100%;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px 0 15px;
	}
	.id-card-keyboard_box-header-label{
		font-size: 18px;
	}
	.id-card-keyboard_box-header-button{
		font-size: 18px;
		color: #327432;
	}
</style>

组件使用说明

本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，http://www.apicloud.com。通过控制平台右上方的模块Store进入，然后选择AVM组件。

找到对应模块点击进入。

也可通过搜索栏，通过组件名称关键字进行检索。

进入模块详情，点击立即下载下载完整的组件安装包。

组件压缩包的文件目录如下

也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。

具体在项目中的使用步骤是，第一步将压缩文件中的easy-id-card-keyboard.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-id-card-keyboard.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

id-card-check.js文件，可根据实际项目放到对应的文件夹中，我放在了utils这个文件夹中。本插件基于ES6语法封装的，分装了checkIdcard方法校验身份证号码的有效性。

身份证号码的验证使用了正则验证，验证不通过会进行提示，可无视验证提示直接使用。

demo-id-card-keyboard.stml

<template>
	<view class="page">
		<safe-area></safe-area>
		<text class="number-box" @click="openNumberBoard">身份证号码:{idCard}</text>
		<id-card-keyboard
			onsetNumber="getNumber" 
			v-if="isShowNUmberBoard">
		 </id-card-keyboard>
	</view>
</template>
<script>
	import '../../components/id-card-keyboard.stml'
	export default {
		name: 'demo-id-card-keyboard',
		apiready(){//like created

		},
		data() {
			return{
				isShowNUmberBoard:false,
				idCard:''		
			}
		},
		methods: {
			closeNumberBoard(e){
				this.data.isShowNUmberBoard = false;
			},
			openNumberBoard(e){
				this.data.isShowNUmberBoard = true;
			},
			getNumber(e){
				// console.log(JSON.stringify(e));
				this.data.idCard = e.detail;
				this.data.isShowNUmberBoard=false;
			}
		}
	}
</script>
<style>
	.page {
		height: 100%;
		background-color: #ffffff;
	}
	.number-box{
		font-size: 20px;
	}
</style>

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

这是组件化开发的在线文档地址