请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
53
帖子
4
勋章
56
Y币

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

[复制链接]
发表于 2022-6-27 14:01:15
身份证号码虚拟输入键盘,可用以身份证号码输入时使用,可对输入的身份证号码进行验证,支持15位和18位。
组件文件
id-card-keyboard.stml
  1. <template>
  2.         <view class="id-card-keyboard_container">
  3.                 <view style="height:100%;"></view>
  4.                 <view class="id-card-keyboard_box">
  5.                         <view class="id-card-keyboard_box-header">
  6.                                 <text class="id-card-keyboard_box-header-label">{idCard}</text>
  7.                                 <text class="id-card-keyboard_box-header-button" @click="checkIdCard">完成</text>
  8.                         </view>
  9.                         <view class="id-card-keyboard_box-item-container">
  10.                                 <view class="id-card-keyboard_box-item" v-for="item in numbers">
  11.                                         <view class="id-card-keyboard_box-item-label" v-if="item.type=='number'" data-key={item.key} @click="getNumber">
  12.                                                 <text style="font-size:28px;">{item.key}</text>
  13.                                         </view>
  14.                                         <view class="id-card-keyboard_box-item-label" v-else-if="item.type=='ico'" @click="delNumber">
  15.                                                 <image class="id-card-keyboard_box-item-ico" src={item.key} mode="widthFix"></image>
  16.                                         </view>                                               
  17.                                 </view>                               
  18.                         </view>       
  19.                 </view>
  20.         </view>
  21. </template>
  22. <script>
  23.         export default {
  24.                 name: 'id-card-keyboard',
  25.                 props:{
  26.                        
  27.                 },
  28.                 installed(){                       
  29.                        
  30.                 },
  31.                 data() {
  32.                         return{
  33.                                 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'}
  34.                                 ,{type:'number',key:'8'},{type:'number',key:'9'},{type:'number',key:'X'},{type:'number',key:'0'},{type:'ico',key:'../../image/keyboard-back.png'}],
  35.                                 numberIndex:0,
  36.                                 resultNumber:[],
  37.                                 idCard:''
  38.                         }
  39.                 },
  40.                 methods: {               
  41.                         getNumber(e){
  42.                                 // console.log(JSON.stringify(e));
  43.                                 if(this.data.numberIndex<18){
  44.                                         this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓
  45.                                         this.data.numberIndex += 1;                               
  46.                                         this.data.idCard = this.data.resultNumber.join('');
  47.                                 }
  48.                                
  49.                         },
  50.                         delNumber(e){
  51.                                 this.data.numberIndex -= 1;       
  52.                                 if(this.data.numberIndex>=0){
  53.                                         this.data.resultNumber.splice(this.data.numberIndex,1);       
  54.                                         this.data.idCard = this.data.resultNumber.join('');                               
  55.                                 }
  56.                         },
  57.                         checkIdCard(){
  58.                                 if(this.data.idCard.length==15 || this.data.idCard.length==18){
  59.                                         //正则验证身份证号码
  60.                                         if(this.data.idCard.length==15){
  61.                                                 var reg=/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
  62.                                                 if(reg.test(this.data.idCard)){
  63.                                                         this.fire('setNumber',this.data.idCard);
  64.                                                 }
  65.                                                 else{
  66.                                                         api.confirm({
  67.                                                                 title: '提示',
  68.                                                                 msg: '您输入的身份证号码不符合规则,是否继续使用?',
  69.                                                                 buttons: ['确定', '取消']
  70.                                                         }, (ret, err)=> {
  71.                                                                 var index = ret.buttonIndex;
  72.                                                                 if(index==1){
  73.                                                                         this.fire('setNumber',this.data.idCard);
  74.                                                                 }                               
  75.                                                         });
  76.                                                 }
  77.                                         }
  78.                                         else if(this.data.idCard.length==18){
  79.                                                 var reg=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  80.                                                 if(reg.test(this.data.idCard)){
  81.                                                         this.fire('setNumber',this.data.idCard);
  82.                                                 }
  83.                                                 else{
  84.                                                         api.confirm({
  85.                                                                 title: '提示',
  86.                                                                 msg: '您输入的身份证号码不符合规则,是否继续使用?',
  87.                                                                 buttons: ['确定', '取消']
  88.                                                         }, (ret, err)=> {
  89.                                                                 var index = ret.buttonIndex;
  90.                                                                 if(index==1){
  91.                                                                         this.fire('setNumber',this.data.idCard);
  92.                                                                 }                               
  93.                                                         });
  94.                                                 }
  95.                                         }
  96.                                 }
  97.                                 else{
  98.                                         api.confirm({
  99.                                                 title: '提示',
  100.                                                 msg: '您输入的身份证号码不符合规则,是否继续使用?',
  101.                                                 buttons: ['确定', '取消']
  102.                                         }, (ret, err)=> {
  103.                                                 var index = ret.buttonIndex;
  104.                                                 if(index==1){
  105.                                                         this.fire('setNumber',this.data.idCard);
  106.                                                 }                               
  107.                                         });
  108.                                 }                                       
  109.                         }
  110.                 }
  111.         }
  112. </script>
  113. <style>
  114.         .id-card-keyboard_container {
  115.                 position: absolute;
  116.                 height: 100%;
  117.                 width: 100%;
  118.                 background-color: rgba(0,0,0,0.1);
  119.         }
  120.         .id-card-keyboard_box{
  121.                 align-items: center;
  122.                 position: absolute;
  123.                 bottom: 0;
  124.                 width: 100%;
  125.                 background-color: #f0f0f0;
  126.                 border-top-left-radius: 30px;
  127.                 border-top-right-radius: 30px;
  128.         }
  129.         .id-card-keyboard_box-item-container{
  130.                 flex-flow:  row wrap;
  131.                 justify-content: space-around;
  132.                 align-items: center;
  133.                 padding: 10px;
  134.         }
  135.         .id-card-keyboard_box-item{
  136.                 flex-basis: 33%;
  137.             box-sizing: border-box;
  138.                 padding: 5px;
  139.         }
  140.         .id-card-keyboard_box-item-label{
  141.                 display: flex;
  142.                 background-color: #ffffff;
  143.                 padding: 5px;
  144.                 border-radius: 5px;
  145.                 width: 100%;
  146.                 height: 48px;
  147.                 align-items: center;
  148.                 justify-content: center;
  149.         }
  150.         .id-card-keyboard_box-item-ico{
  151.                 width: 60px;
  152.         }
  153.         .id-card-keyboard_box-header{
  154.                 width: 100%;
  155.                 flex-flow: row nowrap;
  156.                 justify-content: space-between;
  157.                 align-items: center;
  158.                 padding: 10px 15px 0 15px;
  159.         }
  160.         .id-card-keyboard_box-header-label{
  161.                 font-size: 18px;
  162.         }
  163.         .id-card-keyboard_box-header-button{
  164.                 font-size: 18px;
  165.                 color: #327432;
  166.         }
  167. </style>
复制代码
组件使用demo-id-card-keyboard.stml
  1. <template>
  2.         <view class="page">
  3.                 <safe-area></safe-area>
  4.                 <text class="number-box" @click="openNumberBoard">身份证号码:{idCard}</text>
  5.                 <id-card-keyboard
  6.                         onsetNumber="getNumber"
  7.                         v-if="isShowNUmberBoard">
  8.                  </id-card-keyboard>
  9.         </view>
  10. </template>
  11. <script>
  12.         import '../../components/id-card-keyboard.stml'
  13.         export default {
  14.                 name: 'demo-id-card-keyboard',
  15.                 apiready(){//like created

  16.                 },
  17.                 data() {
  18.                         return{
  19.                                 isShowNUmberBoard:false,
  20.                                 idCard:''               
  21.                         }
  22.                 },
  23.                 methods: {
  24.                         closeNumberBoard(e){
  25.                                 this.data.isShowNUmberBoard = false;
  26.                         },
  27.                         openNumberBoard(e){
  28.                                 this.data.isShowNUmberBoard = true;
  29.                         },
  30.                         getNumber(e){
  31.                                 // console.log(JSON.stringify(e));
  32.                                 this.data.idCard = e.detail;
  33.                                 this.data.isShowNUmberBoard=false;
  34.                         }
  35.                 }
  36.         }
  37. </script>
  38. <style>
  39.         .page {
  40.                 height: 100%;
  41.                 background-color: #ffffff;
  42.         }
  43.         .number-box{
  44.                 font-size: 20px;
  45.         }
  46. </style>
复制代码
身份证号码的验证使用了正则验证,验证不通过会进行提示,可无视验证提示直接使用。
使用示例


本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册

X
您需要登录后才可以回帖 登录

本版积分规则