Vue Js Validate Aadhaar Number

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>Vue js Validate Aadhaar Number</h3>
	<div id="app">
		<input type="text" v-model="aadhaarNumber" @input="formatAadhaarNumber" />
        <pre v-if="errorMessage" style='color:red'>{{ errorMessage }}</pre>
    </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					aadhaarNumber: '',
					errorMessage: '',
				}
			},
			methods: {
				formatAadhaarNumber() {
					// Remove all non-digit characters from the input
					let formattedInput = this.aadhaarNumber.replace(/\D/g, '');
					// Add a space after every four digits
					formattedInput = formattedInput.replace(/(\d{4})(\d)/, '$1 $2');
					formattedInput = formattedInput.replace(/(\d{4})\s(\d{4})(\d)/, '$1 $2 $3');
					// Set the formatted input as the new value of the input field
					this.aadhaarNumber = formattedInput;
					const aadhaarPattern = /^[2-9]{1}[0-9]{3}\s[0-9]{4}\s[0-9]{4}$/;
					if (this.aadhaarNumber === '') {
						this.errorMessage = '';
					} else if (aadhaarPattern.test(this.aadhaarNumber)) {
						this.errorMessage = 'Valid Aadhaar Number';
					} else {
						this.errorMessage = 'Invalid Aadhaar Number';
					}
				},
			},
        });
		app.mount('#app');
	</script>
  <style scoped>
		input {
			height: 40px;
			text-align: center;
			font-size: 24px;
			margin: 0;
			padding-left: 0;
			border: none;
			border-bottom: 2px solid #ccc;
			box-shadow: none;
			background-color: transparent;
			color: #333;
			transition: all 0.3s ease-in-out;
			font-family: Arial, Helvetica, sans-serif;
		}

input:focus {
			outline: none;
			border-bottom-color: #007bff;
		}
	</style>
</body>
</html>