repen/gist:ec96caa28e1439bcc5de4bc149615514

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Car Info Form</title>
    <style>
        .block {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Занимает 100% высоты окна браузера */
            margin: 0;
        }

        .block form {
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
        }
        input {
            width: 250px;
        }

        #warning {
            display: none;
            padding: 10px;
            background-color: #ffc107;
            border: 1px solid #ffa000;
            margin-top: 10px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="block">
        <form id="carForm">
            <label for="vin">VIN: WBATX710109G69194</label>
            <br>
            <input type="text" id="vin" maxlength="17">
            <div style="margin-top: 15px;"></div>
            <br>

            <label for="gn">GN: RRRR123</label>
            <br>
            <input type="text" id="gn">
            <div style="margin-top: 15px;"></div>
            <br>

            <button type="button" id="vin_btn">Submit</button>


            <div id="warning"></div>

        </form>
    </div>


    <script>
        // Получаем элементы формы и кнопки
        var vin = document.querySelector("#vin");
        var gn = document.querySelector("#gn");
        var btn = document.querySelector("#vin_btn");

        var vinRegex = /^[ABCDEFGHJKLMNPRSTUVWXYZabcdefghjklmnprstuvwxyz0-9]{1,17}$/;
        var gnRegex = /^[A-Z]{3,4}\d{1,3}$/;

        const _checkGn = {
            1 : (val) => /[A-Z]/.test(val[0]),
            2 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]),
            3 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]),
            4 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]),
            5 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]),
            6 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]) && /[0-9]/.test(val[5]),
            7 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]) && /[0-9]/.test(val[5]) && /[0-9]/.test(val[6]),
        };

        const checkGn = (val) => {
            if (!val || val.length >= 8){
                return false;
            }

            if (val.length >= 4 && /^[A-Z]{3}[0-9]+$/.test(val)){
                return val.match(/\d+/)[0].length <= 3;
            } else {
                return _checkGn[val.length](val);
            }

        };
        // Обработчики событий для ввода и клавиш
        document.querySelector("#vin").addEventListener("keyup", function (e){
            inputHandler(e.target, (val)=>{
                return vinRegex.test(val)
            }, 17);
        });

        document.querySelector("#gn").addEventListener("keyup", function (e){
            inputHandler(e.target, checkGn, 7);
        });

        document.querySelector("#vin").addEventListener("keydown", function (e){
            inputHandler(e.target, (val)=>{
                return vinRegex.test(val)
            }, 17);
        });

        document.querySelector("#gn").addEventListener("keydown", function (e){
            inputHandler(e.target, checkGn, 7);
        });

        // Обработчик события для кнопки "Submit"
        btn.addEventListener('click', function (e) {
            e.preventDefault();


             // Валидация VIN и ГосНомер
            if (!vinRegex.test(vin.value)){
                showWarning('Поле VIN код не прошел валидацию');
                return;

            }
            if (!gnRegex.test(gn.value)){
                showWarning('Поле ГосНомер не прошел валидацию');
                return;
            }
            sendForm();

        });

        // Отправка формы
        function sendForm(){
            const vinVal = vin.value;
            const gnVal = gn.value;
            alert('Форма отправлена: ' + `VIN: ` + vinVal + ` GN: ` + gnVal);
        }


        // Обработчик ввода
        function inputHandler(target, callback, maxLength){

            target.value = target.value.toUpperCase();

            if (!callback(target.value)){
                target.value = target.value.slice(0, -1);
            }

            target.value = target.value.slice(0, maxLength);
            clearWarning();

        }

         // Показать предупреждение
        function showWarning(message) {
            var warningDiv = document.getElementById('warning');
            warningDiv.textContent = 'Внимание: ' + message;
            warningDiv.style.display = 'block';
        }

        // Очистить предупреждение
        function clearWarning() {
            var warningDiv = document.getElementById('warning');
            warningDiv.textContent = '';
            warningDiv.style.display = 'none';
        }


    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Car Info Form</title>
	<style>
	.block {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh; /* Занимает 100% высоты окна браузера */
	margin: 0;
	}

	.block form {
	text-align: center;
	padding: 20px;
	border: 1px solid #ccc;
	}
	input {
	width: 250px;
	}

	#warning {
	display: none;
	padding: 10px;
	background-color: #ffc107;
	border: 1px solid #ffa000;
	margin-top: 10px;
	font-weight: bold;
	color: #333;
	}
	</style>
	</head>
	<body>
	<div class="block">
	<form id="carForm">
	<label for="vin">VIN: WBATX710109G69194</label>
	<br>
	<input type="text" id="vin" maxlength="17">
	<div style="margin-top: 15px;"></div>
	<br>

	<label for="gn">GN: RRRR123</label>
	<br>
	<input type="text" id="gn">
	<div style="margin-top: 15px;"></div>
	<br>

	<button type="button" id="vin_btn">Submit</button>


	<div id="warning"></div>

	</form>
	</div>


	<script>
	// Получаем элементы формы и кнопки
	var vin = document.querySelector("#vin");
	var gn = document.querySelector("#gn");
	var btn = document.querySelector("#vin_btn");

	var vinRegex = /^[ABCDEFGHJKLMNPRSTUVWXYZabcdefghjklmnprstuvwxyz0-9]{1,17}$/;
	var gnRegex = /^[A-Z]{3,4}\d{1,3}$/;

	const _checkGn = {
	1 : (val) => /[A-Z]/.test(val[0]),
	2 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]),
	3 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]),
	4 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]),
	5 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]),
	6 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]) && /[0-9]/.test(val[5]),
	7 : (val) => /[A-Z]/.test(val[0]) && /[A-Z]/.test(val[1]) && /[A-Z]/.test(val[2]) && /[A-Z0-9]/.test(val[3]) && /[0-9]/.test(val[4]) && /[0-9]/.test(val[5]) && /[0-9]/.test(val[6]),
	};

	const checkGn = (val) => {
	if (!val \|\| val.length >= 8){
	return false;
	}

	if (val.length >= 4 && /^[A-Z]{3}[0-9]+$/.test(val)){
	return val.match(/\d+/)[0].length <= 3;
	} else {
	return _checkGn[val.length](val);
	}

	};
	// Обработчики событий для ввода и клавиш
	document.querySelector("#vin").addEventListener("keyup", function (e){
	inputHandler(e.target, (val)=>{
	return vinRegex.test(val)
	}, 17);
	});

	document.querySelector("#gn").addEventListener("keyup", function (e){
	inputHandler(e.target, checkGn, 7);
	});

	document.querySelector("#vin").addEventListener("keydown", function (e){
	inputHandler(e.target, (val)=>{
	return vinRegex.test(val)
	}, 17);
	});

	document.querySelector("#gn").addEventListener("keydown", function (e){
	inputHandler(e.target, checkGn, 7);
	});

	// Обработчик события для кнопки "Submit"
	btn.addEventListener('click', function (e) {
	e.preventDefault();


	// Валидация VIN и ГосНомер
	if (!vinRegex.test(vin.value)){
	showWarning('Поле VIN код не прошел валидацию');
	return;

	}
	if (!gnRegex.test(gn.value)){
	showWarning('Поле ГосНомер не прошел валидацию');
	return;
	}
	sendForm();

	});

	// Отправка формы
	function sendForm(){
	const vinVal = vin.value;
	const gnVal = gn.value;
	alert('Форма отправлена: ' + `VIN: ` + vinVal + ` GN: ` + gnVal);
	}


	// Обработчик ввода
	function inputHandler(target, callback, maxLength){

	target.value = target.value.toUpperCase();

	if (!callback(target.value)){
	target.value = target.value.slice(0, -1);
	}

	target.value = target.value.slice(0, maxLength);
	clearWarning();

	}

	// Показать предупреждение
	function showWarning(message) {
	var warningDiv = document.getElementById('warning');
	warningDiv.textContent = 'Внимание: ' + message;
	warningDiv.style.display = 'block';
	}

	// Очистить предупреждение
	function clearWarning() {
	var warningDiv = document.getElementById('warning');
	warningDiv.textContent = '';
	warningDiv.style.display = 'none';
	}


	</script>

	</body>
	</html>