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

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>

标签： javascript

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>