使用表单输入中的值确定它们是否超过特定年龄

Question

我该如何编写一个程序，以html形式获取值，计算用户年龄，并确定他们是否可以访问网站（如果年龄超过指定年龄）？

我最初的想法是在单击按钮后从输入表单中获取值。将该值与今天的日期进行比较，如果该值小于指定的年龄，则会将用户定向到其他网站。

这就是我现在所拥有的。

// get values
var userMonth = document.getElementById('userMonth');
var userDay = document.getElementById('userDay');
var userYear = document.getElementById('userYear');
var submitButton = document.getElementById('btnCheckBday');

// when the button is clicked
submitButton.addEventListener("click", calcBirthDate);

// calculating birthday
function calcBirthDate() {
  // get values from user info
  month = userMonth.value;
  day = userDay.value;
  year = userYear.value;

  today = new Date();
  birthday = new Date(year, month, day);
  oldEnough = today - birthday;

  if (oldEnough >= 21) {
    console.log("You are older than 21");
  } else {
    console.log("You are below the age of 21");
  }
}

<form>
  <div class="container form-contain">
    <!-- name input -->
    <div class="form-group row">
      <label for="name" class="col-2 col-form-label" id="label-name">Full Name</label>
      <div class="col-10">
        <input type="text" name="name" class="form-control" id="input-name">
      </div>
    </div>

    <div class="from-group row">

      <!-- month -->
      <label for="month" class="col-2 col-form-label" id="label-year">Month:</label>
      <div class="col-2">
        <input type="number" name="month" class="form-control" id="userMonth">
      </div>

      <!-- Day -->
      <label for="day" class="col-2 col-form-label" id="label-year">Day</label>
      <div class="col-2">
        <input type="number" name="day" class="form-control" id="userDay">
      </div>

      <!-- Year -->
      <label for="year" class="col-2 col-form-label" id="label-year">Year</label>
      <div class="col-2">
        <input type="number" name="year" class="form-control" id="userYear">
      </div>

      <div class="form-group row">
        <button class="btn btn-primary" id="btnCheckBday" value="submit">Submit</button>
      </div>


    </div>
  </div>
</form>

Answer 1

您的button被解释为提交form的提交按钮。为了避免这种情况，请将button类型更改为“按钮”，或者使用event.preventDefault()来阻止表单（如果用户年龄不足）提交。

另外，将两个日期相减将不会得出它们之间的年数，这相当于进行date2.getTime()-date1.getTime()。

// get values
var userMonth = document.getElementById('userMonth');
var userDay = document.getElementById('userDay');
var userYear = document.getElementById('userYear');
var submitButton = document.getElementById('btnCheckBday');

// when the button is clicked
submitButton.addEventListener("click", calcBirthDate);

// calculating birthday
function calcBirthDate() {
  var event = arguments[0];
  event.preventDefault();//call this anywhere to prevent form submission
  // get values from user info
  month = userMonth.value;
  day = userDay.value;
  year = userYear.value;

  today = new Date();
  birthday = new Date(year, month-1, day);
        var y1 = today.getFullYear();
        var m1 = today.getMonth();
        var d1 = today.getDate();
        var y2 = birthday.getFullYear();
        var m2 = birthday.getMonth();
        var d2 = birthday.getDate();
        var diff = y1 - y2;
        if (m2 > m1) diff--;
        else {
            if (m2 == m1) {
                if (d2 > d1) diff--;
            }
        }
        oldEnough = diff;
  if (oldEnough >= 21) {
    console.log("You are older than 21");
  } else {
    console.log("You are below the age of 21");
  }
}

<form>
  <div class="container form-contain">
    <!-- name input -->
    <div class="form-group row">
      <label for="name" class="col-2 col-form-label" id="label-name">Full Name</label>
      <div class="col-10">
        <input type="text" name="name" class="form-control" id="input-name">
      </div>
    </div>

    <div class="from-group row">

      <!-- month -->
      <label for="month" class="col-2 col-form-label" id="label-year">Month:</label>
      <div class="col-2">
        <input type="number" name="month" class="form-control" id="userMonth">
      </div>

      <!-- Day -->
      <label for="day" class="col-2 col-form-label" id="label-year">Day</label>
      <div class="col-2">
        <input type="number" name="day" class="form-control" id="userDay">
      </div>

      <!-- Year -->
      <label for="year" class="col-2 col-form-label" id="label-year">Year</label>
      <div class="col-2">
        <input type="number" name="year" class="form-control" id="userYear">
      </div>

      <div class="form-group row">
        <button class="btn btn-primary" id="btnCheckBday" value="submit">Submit</button>
      </div>


    </div>
  </div>
</form>

Answer 2

您必须使用event.preventDefault()来停止浏览器以执行表单提交中的常规任务。

您的生日计算逻辑也有缺陷，oldEnough = today - birthday将为您提供新纪元时间（1970年为毫秒），该时间将始终大于21。您可以执行如下所示的操作。

// get values
var userMonth = document.getElementById('userMonth');
var userDay = document.getElementById('userDay');
var userYear = document.getElementById('userYear');
var submitButton = document.getElementById('btnCheckBday');

// when the button is clicked
submitButton.addEventListener("click", calcBirthDate);

// calculating birthday
function calcBirthDate(e) {
  e.preventDefault();
  // get values from user info
  month = userMonth.value;
  day = userDay.value;
  year = userYear.value;

  today = new Date();
  oldEnough = new Date();
  oldEnough.setFullYear(today.getFullYear() - 21)
  birthday = new Date(year, month, day);

  console.log(birthday)
  console.log(oldEnough)

  if (birthday < oldEnough) {
    console.log("You are older than 21");
  } else {
    console.log("You are below the age of 21");
  }
}

<form>
  <div class="container form-contain">
    <!-- name input -->
    <div class="form-group row">
      <label for="name" class="col-2 col-form-label" id="label-name">Full Name</label>
      <div class="col-10">
        <input type="text" name="name" class="form-control" id="input-name">
      </div>
    </div>

    <div class="from-group row">

      <!-- month -->
      <label for="month" class="col-2 col-form-label" id="label-year">Month:</label>
      <div class="col-2">
        <input type="number" name="month" class="form-control" id="userMonth">
      </div>

      <!-- Day -->
      <label for="day" class="col-2 col-form-label" id="label-year">Day</label>
      <div class="col-2">
        <input type="number" name="day" class="form-control" id="userDay">
      </div>

      <!-- Year -->
      <label for="year" class="col-2 col-form-label" id="label-year">Year</label>
      <div class="col-2">
        <input type="number" name="year" class="form-control" id="userYear">
      </div>

      <div class="form-group row">
        <button class="btn btn-primary" id="btnCheckBday" value="submit">Submit</button>
      </div>


    </div>
  </div>
</form>

Answer 3

只需更新一下代码，它就会为您显示有关年龄的正确答案，请根据您的需要进行更新。

// get values
var userMonth = document.getElementById('userMonth');
var userDay = document.getElementById('userDay');
var userYear = document.getElementById('userYear');
var submitButton = document.getElementById('btnCheckBday');

// when the button is clicked
submitButton.addEventListener("click", calcBirthDate);

// calculating birthday
function calcBirthDate() {
  // get values from user info
  month = userMonth.value;
  day = userDay.value;
  year = userYear.value;

  today = new Date();
  birthday = new Date(year+ "-"+month+"-"+ day);
  birthdayFormated = moment(birthday, "YYYY-MM-DD")
  oldEnough = today - birthdayFormated;

console.log("oldEnough "+oldEnough);

var today21 = today.setFullYear(today.getFullYear() - 21);
console.log("21 "+today21);

  if (new Date(oldEnough) >= new Date(today21)) {
    console.log("You are older than 21");
  } else {
    console.log("You are below the age of 21");
  }
}

<form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

  <div class="container form-contain">
    <!-- name input -->
    <div class="form-group row">
      <label for="name" class="col-2 col-form-label" id="label-name">Full Name</label>
      <div class="col-10">
        <input type="text" name="name" class="form-control" id="input-name">
      </div>
    </div>

    <div class="from-group row">

      <!-- month -->
      <label for="month" class="col-2 col-form-label" id="label-year">Month:</label>
      <div class="col-2">
        <input type="number" name="month" class="form-control" id="userMonth">
      </div>

      <!-- Day -->
      <label for="day" class="col-2 col-form-label" id="label-year">Day</label>
      <div class="col-2">
        <input type="number" name="day" class="form-control" id="userDay">
      </div>

      <!-- Year -->
      <label for="year" class="col-2 col-form-label" id="label-year">Year</label>
      <div class="col-2">
        <input type="number" name="year" class="form-control" id="userYear">
      </div>

      <div class="form-group row">
        <button class="btn btn-primary" id="btnCheckBday" value="submit">Submit</button>
      </div>


    </div>
  </div>
</form>