[input ID number] is replaced by an asterisk, and input is cut into multiple small squares (similar)

The first one is , ID number check , also Specific date Show **** Instead of

<div class="list">
		<div> ID number </div>
		 <input placeholder=" Please input ID card number " 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(' Please enter the correct ID number ');
					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;
		},

The second kind , coordination vant Of ID card keyboard

<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=" complete "
	:show="showKeyboard"
	@blur="closekeyboard"
	@close="closekeyboard"
/>

	data() {
    
		return {
    
			value: '', // watch  monitor   Real time input   Numbers 
			showKeyboard: false, //  Whether the keyboard pops up 
			cardarr:[], //  Deposit   Input number   Array 
			card1:'',
			card2:'',
			card3:'',
			card4:'',
			card5:'',
			card6:'',
			card7:'',
			card8:'',
			card9:'',
			card10:'',
			card15:'',
			card16:'',
			card17:'',
			card18:'',
			xing:'*'
			}
}

 watch: {
    
	value(value) {
    
	//  character string   turn   Array   Be similar to  123  turn  【1,2,3】
		this.cardarr = [ ...value ]
		//  Because in the middle   Four digit turn ****  Instead of , therefore , A total of 14 Digit number 
		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]
	},
},

//  Open the keyboard 
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 = ''
		},
		//  Turn off the keyboard 
		closekeyboard(){
    
			this.showKeyboard = false

			if(this.cardarr.length < 14){
    
					this.$toast(' Please enter the correct ID number ');
					return  false;
			}

			this.idNumber = this.value
			this.requstIdNumber = this.idNumber
			//  ID number   Spliced like this  4108820000****1222
			this.requstIdNumber = this.requstIdNumber.slice(0,10) + "****" + this.requstIdNumber.slice(10,14)

		},
}