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

原创

于 2022-07-28 16:58:14 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

该博客介绍了两种身份证号码的验证方法，第一种通过正则表达式在校验身份证合法性的同时，用****遮挡中间四位。第二种方法利用vant的数字键盘组件，实时显示输入的身份证号，并在达到14位时自动替换中间四位为****。同时提供了相应的数据绑定和事件处理逻辑。

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

<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}}

最低0.47元/天解锁文章

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

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