|
身份证号码虚拟输入键盘,可用以身份证号码输入时使用,可对输入的身份证号码进行验证,支持15位和18位。
组件文件
id-card-keyboard.stml
- <template>
- <view class="id-card-keyboard_container">
- <view style="height:100%;"></view>
- <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="checkIdCard">完成</text>
- </view>
- <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>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: 'id-card-keyboard',
- props:{
-
- },
- installed(){
-
- },
- 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:'../../image/keyboard-back.png'}],
- 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('');
- }
- },
- checkIdCard(){
- if(this.data.idCard.length==15 || this.data.idCard.length==18){
- //正则验证身份证号码
- if(this.data.idCard.length==15){
- var reg=/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
- if(reg.test(this.data.idCard)){
- this.fire('setNumber',this.data.idCard);
- }
- else{
- api.confirm({
- title: '提示',
- msg: '您输入的身份证号码不符合规则,是否继续使用?',
- buttons: ['确定', '取消']
- }, (ret, err)=> {
- var index = ret.buttonIndex;
- if(index==1){
- this.fire('setNumber',this.data.idCard);
- }
- });
- }
- }
- else if(this.data.idCard.length==18){
- 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]$/;
- if(reg.test(this.data.idCard)){
- this.fire('setNumber',this.data.idCard);
- }
- else{
- api.confirm({
- title: '提示',
- msg: '您输入的身份证号码不符合规则,是否继续使用?',
- buttons: ['确定', '取消']
- }, (ret, err)=> {
- var index = ret.buttonIndex;
- if(index==1){
- this.fire('setNumber',this.data.idCard);
- }
- });
- }
- }
- }
- else{
- api.confirm({
- title: '提示',
- msg: '您输入的身份证号码不符合规则,是否继续使用?',
- buttons: ['确定', '取消']
- }, (ret, err)=> {
- var index = ret.buttonIndex;
- if(index==1){
- 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.1);
- }
- .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;
- }
- .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;
- }
- .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>
复制代码 组件使用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>
复制代码 身份证号码的验证使用了正则验证,验证不通过会进行提示,可无视验证提示直接使用。
使用示例
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|