JavaScript: HTML Form - Проверка даты

Последнее обновление 22 мая 2019 10:14:23 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Дата проверки

Очень важно проверить данные, предоставленные пользователем через форму, прежде чем обрабатывать их. Среди различных видов проверки данных валидация даты является одной.

В этом уроке мы обсудили, как вы можете выполнить валидацию даты JavaScript в
1. формат дд / мм / гггг или дд-мм-гггг.
2. мм / дд / гггг или мм-дд-гггг формат.

В следующих примерах функция JavaScript используется для проверки допустимого формата даты по регулярному выражению. Позже мы берем каждую часть строки, предоставленную пользователем (то есть dd, mm и yyyy) и проверяем, является ли dd действительной датой, mm является действительным месяцем или yyyy является действительным годом. Мы также проверили коэффициент високосного года за февраль. Мы использовали символы «/» и «-» в качестве разделителя в формате даты, но вы можете изменить этот разделитель так, как вам хочется.

Проверьте формат дд / мм / гггг или дд-мм-гггг

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking date</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />   
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input a valid date [dd/mm/yyyy or dd-mm-yyyy format]</h2>
<form name="form1" action="#"> 
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="validatedate(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="ddmmyyyy-validation.js"></script>
</body>
</html>

Код JavaScript

function validatedate(inputText)
  {
  var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
  // Match the date format through regular expression
  if(inputText.value.match(dateformat))
  {
  document.form1.text1.focus();
  //Test which seperator is used '/' or '-'
  var opera1 = inputText.value.split('/');
  var opera2 = inputText.value.split('-');
  lopera1 = opera1.length;
  lopera2 = opera2.length;
  // Extract the string into month, date and year
  if (lopera1>1)
  {
  var pdate = inputText.value.split('/');
  }
  else if (lopera2>1)
  {
  var pdate = inputText.value.split('-');
  }
  var dd = parseInt(pdate[0]);
  var mm  = parseInt(pdate[1]);
  var yy = parseInt(pdate[2]);
  // Create list of days of a month [assume there is no leap year by default]
  var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
  if (mm==1 || mm>2)
  {
  if (dd>ListofDays[mm-1])
  {
  alert('Invalid date format!');
  return false;
  }
  }
  if (mm==2)
  {
  var lyear = false;
  if ( (!(yy % 4) && yy % 100) || !(yy % 400)) 
  {
  lyear = true;
  }
  if ((lyear==false) && (dd>=29))
  {
  alert('Invalid date format!');
  return false;
  }
  if ((lyear==true) && (dd>29))
  {
  alert('Invalid date format!');
  return false;
  }
  }
  }
  else
  {
  alert("Invalid date format!");
  document.form1.text1.focus();
  return false;
  }
  }

Блок - схема:

CSS код

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

Посмотреть пример в браузере

Подтвердите формат мм / дд / гггг или мм-дд-гггг

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking date [mm/dd/yyyy or mm-dd-yyyy format]</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input a valid date [mm/dd/yyyy or mm-dd-yyyy format]</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="validatedate(document.form1.text1)"/></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="mmddyyyy-validation.js"></script>
</body>
</html>

Код JavaScript

function validatedate(inputText)
  {
  var dateformat = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;
  // Match the date format through regular expression
  if(inputText.value.match(dateformat))
  {
  document.form1.text1.focus();
  //Test which seperator is used '/' or '-'
  var opera1 = inputText.value.split('/');
  var opera2 = inputText.value.split('-');
  lopera1 = opera1.length;
  lopera2 = opera2.length;
  // Extract the string into month, date and year
  if (lopera1>1)
  {
  var pdate = inputText.value.split('/');
  }
  else if (lopera2>1)
  {
  var pdate = inputText.value.split('-');
  }
  var mm  = parseInt(pdate[0]);
  var dd = parseInt(pdate[1]);
  var yy = parseInt(pdate[2]);
  // Create list of days of a month [assume there is no leap year by default]
  var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
  if (mm==1 || mm>2)
  {
  if (dd>ListofDays[mm-1])
  {
  alert('Invalid date format!');
  return false;
  }
  }
  if (mm==2)
  {
  var lyear = false;
  if ( (!(yy % 4) && yy % 100) || !(yy % 400)) 
  {
  lyear = true;
  }
  if ((lyear==false) && (dd>=29))
  {
  alert('Invalid date format!');
  return false;
  }
  if ((lyear==true) && (dd>29))
  {
  alert('Invalid date format!');
  return false;
  }
  }
  }
  else
  {
  alert("Invalid date format!");
  document.form1.text1.focus();
  return false;
  }
  }

Примечание. Код CSS одинаков для обоих примеров.

Посмотреть пример в обзоре

Загрузите код проверки отсюда.

Другая проверка JavaScript:

Предыдущая: JavaScript: HTML-форма - подтверждение по электронной почте
Далее: Проверка формы JavaScript с использованием образца формы регистрации