@IvanLu
Начинающий веб-разработчик

Как валидировать инпут тайм?

У меня в html есть строка time, мне нужно сделать так чтоб пользователь мог ввести время только в таком формате "14:30" используя регулярное выражение /^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$/ . Как это реализовать?
Мой код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HW_8</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
  	<div class="main_form">
  		<div class="box">
  			<div class="name_form">
  			<label for="name">Enter name:</label><br>
  			<input type="text" name="text" placeholder="Name..." id="name">
  			</div>

  			<div class="time_form">
  			<label for="time">Enter time:</label><br>
  			<input type="text" name="time" placeholder="Time..." id="time">
  			</div>

  			<div class="place_form">
  			<label for="place">Enter place:</label><br>
  			<input type="text" name="place" placeholder="Place..." id="place">
  			</div>
  			<div class="button_form">
  			<button onclick="emptyRevision()">Confirm</button>
  			<button>Converter</button>
  			</div>
  		</div>
  	</div>
  </main>
  <script type="text/javascript" src="js/app.js"></script>
</body>
</html>


*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}
html{
	background-color: #d7f5e7;
}
.main_form{
   display: flex;
   align-items: center;
   justify-content: center;
}
.box{
	padding: 7px 0px 4px 6px;
	width: 900px;
	height: 340px;
	background-color: #fff;
	border: 1px solid #000;
}
.box input{
	width: 850px;
	height: 35px;
	background-color: #39bd8e;
	border: none;
	padding: 4px;
}
.box button{
	height: 40px;
	width: 80px;
	color: #fff;
	background-color: #4bb14f;
	border: none;
}
.box button:hover{
	border:2px solid #000;
}
.box div{
	padding-top: 10px;
}
.button_form{
	position: absolute;
	margin-top: 40px;
}
._hidden {
    display: none;
}


let metEvent = prompt('Event name:', 'event');
if (metEvent === null) {
	document.querySelector('.main_form').classList.add('_hidden');
}

//Empty check

function emptyRevision(){
if(document.getElementById('name').value === '') {
   alert('Input all data');
}
if(document.getElementById('place').value === '') {
   alert('Input all data');
}

}
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
Spartak-2205
@Spartak-2205
Разработка и создание сайтов
let time = document.getElementById('time').value;
let regex = new RegExp("^(2[0-3]|[01]?[0-9]):([0-5]?[0-9])$");
if (regex.test(time)) {
	alert("time true");
} else {
	alert("time false");
	return false;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы