Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проверка возраста (https://javascript.ru/forum/dom-window/58965-proverka-vozrasta.html)

Intrerio 20.10.2015 12:35

Проверка возраста
 
Здравствуйте друзья.
Имеется форма в которую пользователь должен ввести дату рождения клиента дд.мм.гггг. Задача стоит:
На лету проверить достиг ли клиент 18 лет. Если да то все ок, если нет то красный крестик возле поля и пояснение к ошибке.
Кто направит полет мысли в правильное русло?

рони 20.10.2015 12:50

Intrerio,
получить данные, проверить условие, добавить класс если нужно.
http://javascript.ru/forum/misc/1280...html#post98734

ksa 20.10.2015 13:26

Цитата:

Сообщение от рони
Расчет возраста

Мы используем такой вариант...

alert(Math.floor((20151020-19870331)/10000));

Intrerio 20.10.2015 13:50

Большое спасибо за помощь. Использовал вариант рони. Все прекрасно работает. Добавил вывод картинок, изменил контстанты и поставил еще пару фишек.Теперь все красиво и функционально. Сейчас открою вторую тему по поводу вычисления количества дней.

Intrerio 20.10.2015 13:51

Не могу понять как закрыть тему))

ksa 20.10.2015 13:53

Цитата:

Сообщение от Intrerio
как закрыть тему

Они не закрываются... :no:

Intrerio 20.10.2015 13:56

Хих)) чудненько). Кстати открыл уже новый вопрос, так что буду благодарен за помощь

EmperioAf 20.10.2015 14:34

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
  margin:0;
  padding: 0;
  outline: none;
}
.result {
  margin-top: 20px;
  border: 1px solid red;
  width: 400px;
  height: 50px;
}

</style>
</head>

<body>
<form action="" id="birthday">
  <label for="day">День рождения</label>
  <select name="day" id="day">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>
  <label for="month">Месяц</label>
  <select name="month" id="month">
    <option value="1">Январь</option>
    <option value="2">Февраль</option>
    <option value="3">Март</option>
    <option value="4">Апрель</option>
    <option value="5">Май</option>
    <option value="6">Июнь</option>
    <option value="7">Июль</option>
    <option value="8">Август</option>
    <option value="9">Сентябрь</option>
    <option value="10">Октябрь</option>
    <option value="11">Ноябрь</option>
    <option value="12">Декабрь</option>
  </select>
  <label for="year">Год</label>
  <select name="year" id="year">
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
  </select>
</form>
<div class="result"></div>
    <script>
var form = document.querySelector('#birthday');
form.onchange = function(){
  var t = new Date();
  var y = form.querySelector('#year').options[document.getElementById("year").selectedIndex].value;
  var m = form.querySelector('#month').value;
  var d = form.querySelector('#day').value;
  console.log(form.querySelector('#month').value);
  console.log(form.querySelector('#day').value);
  var a = ( t.getFullYear() - y - ((t.getMonth() - --m||t.getDate() - d)<0) );


  document.querySelector('.result').innerHTML = a;
}
    </script>
</body>
</html>


Часовой пояс GMT +3, время: 18:12.