【input 身份证号】星号代替，input 切割成多个小格格（类似）

最新推荐文章于 2023-11-02 16:31:18 发布

嘿，小苹果

最新推荐文章于 2023-11-02 16:31:18 发布

阅读量562

点赞数

分类专栏： VUE 正则文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/AAAXiaoApple/article/details/126038545

版权

VUE 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

正则

5 篇文章 0 订阅

订阅专栏

第一种，身份证号校验，并且年月日显示 **** 代替

<div class="list">
		<div>身份证号</div>
		 <input placeholder="请输入身份证号" type="text" v-model="idNumber" @blur="idNumberFun"/>
	</div>

idNumberFun(){
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
			if(reg.test(this.idNumber) === false){  
					this.$toast('请输入正确的身份证号');
					return  false;
			} 
			this.requstIdNumber = this.idNumber
			this.idNumber =	this.changeIdCardIncludeStart(this.idNumber)
			console.log(this.idNumber,'-===',this.requstIdNumber)
		},
	
		changeIdCardIncludeStart (cardId) {
				const newStr = cardId.replace(/^(.{6})(?:\d+)(.{4})$/,"$1****$2");
				return newStr;
		},

第二种，配合 vant 的身份证键盘
在这里插入图片描述

<div class="cardbox" @click="open">
	<span>{{card1}}</span>
	<span>{{card2}}</span>
	<span>{{card3}}</span>
	<span>{{card4}}</span>
	<span>{{card5}}</span>
	<span>{{card6}}</span>
	<span>{{card7}}</span>
	<span>{{card8}}</span>
	<span>{{card9}}</span>
	<span>{{card10}}</span>
	<span class="xingbox">*</span>
	<span class="xingbox">*</span>
	<span class="xingbox">*</span>
	<span class="xingbox">*</span>
	<span>{{card15}}</span>
	<span>{{card16}}</span>
	<span>{{card17}}</span>
	<span>{{card18}}</span>
</div>

<van-number-keyboard
	v-model="value"
	extra-key="X"
	close-button-text="完成"
	:show="showKeyboard"
	@blur="closekeyboard"
	@close="closekeyboard"
/>

	data() {
		return {
			value: '', // watch 监听 实时输入的 数字
			showKeyboard: false, // 键盘是否弹起
			cardarr:[], // 存放 输入的数字 数组
			card1:'',
			card2:'',
			card3:'',
			card4:'',
			card5:'',
			card6:'',
			card7:'',
			card8:'',
			card9:'',
			card10:'',
			card15:'',
			card16:'',
			card17:'',
			card18:'',
			xing:'*'
			}
}

 watch: {
	value(value) {
	// 字符串 转 数组 类似于 123 转 【1,2，3】
		this.cardarr = [ ...value ]
		// 因为中间 四位转**** 代替，所以，一共输入的是14位数字
		if(this.cardarr.length > 14){
			this.cardarr = this.cardarr.splice(0,14);
			this.value = this.value.substring(0,14);
		}
		this.card1 = this.cardarr[0]
		this.card2 = this.cardarr[1]
		this.card3 = this.cardarr[2]
		this.card4 = this.cardarr[3]
		this.card5 = this.cardarr[4]
		this.card6 = this.cardarr[5]
		this.card7 = this.cardarr[6]
		this.card8 = this.cardarr[7]
		this.card9 = this.cardarr[8]
		this.card10 = this.cardarr[9]
		this.card15 = this.cardarr[10]
		this.card16 = this.cardarr[11]
		this.card17 = this.cardarr[12]
		this.card18 = this.cardarr[13]
	},
},

// 打开键盘
methods：{

		open(){
			this.showKeyboard = true
			this.cardarr = []
			this.value = ''
			this.card1 = ''
			this.card2 = ''
			this.card3 = ''
			this.card4 = ''
			this.card5 = ''
			this.card6 = ''
			this.card7 = ''
			this.card8 = ''
			this.card9 = ''
			this.card10 = ''
			this.card15 = ''
			this.card16 = ''
			this.card17 = ''
			this.card18 = ''
		},
		// 关闭键盘
		closekeyboard(){
			this.showKeyboard = false

			if(this.cardarr.length < 14){
					this.$toast('请输入正确的身份证号');
					return  false;
			}

			this.idNumber = this.value
			this.requstIdNumber = this.idNumber
			// 身份证号 拼接成这样  4108820000****1222
			this.requstIdNumber = this.requstIdNumber.slice(0,10) + "****" + this.requstIdNumber.slice(10,14)

		},
}