以 html 形式验证正确年龄的问题答案

【问题标题】：Issue with verifying correct age in html form以 html 形式验证正确年龄的问题
【发布时间】：2020-04-29 22:32:10
【问题描述】：

我想确保年龄与出生年份一致，其中两个值都以 html 形式提交，与当前年份一致。但是，在输入一个不能满足我的要求的值时，它不会给我一个警报。

function formError() {

  if (document.getElementById('name').value == "") {
    alert('Please enter your name.');
    document.getElementById('name').style.borderColor = "red";
    return false;
  }

  if (document.getElementById('yearborn').value == "") {
    alert('Please enter the year you were born.');
    document.getElementById('yearborn').style.borderColor = "red";
    return false;
  }

  if (document.getElementById('age').value == "") {
    alert('Please enter your age.');
    document.getElementById('age').style.borderColor = "red";
    return false;
  }

  var d = new Date();
  var n = d.getFullYear();
  var age = document.getElementById('age').value;
  var yearBorn = getElementById('yearborn').value;

  if (n - age !== yearBorn) {
    alert('Please make sure that your age and year born is correct.');
    return false;
  }

}

<fieldset>
  <form id="frmName" method=post action="#" onsubmit="return formError()">
    <h1>Inf115 compulsory assignment 3</h1>
    <p>
      <b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
    </p>
    <p>
      <b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
    </p>
    <p>
      <b>Age:</b><input type=int id="age" maxlength="3" />
    </p>
    <p>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </p>
  </form>
</fieldset>

【问题讨论】：

错字：var yearBorn = document.getElementById('yearborn').value;

标签： javascript html forms validation

【解决方案1】：

document.getElementById 中缺少文档
年龄错误 - 用户可能尚未出生 - 年出生
无效的 HTML，字段集应该在表单内
我强烈建议使用 eventListener 并在出错前重置颜色

如果你不想要这些建议，那么

    const diff = n - yearBorn - age ;
    if (diff !== 0 && diff !== 1) {

够了

window.addEventListener("load", function() {
  document.getElementById("frmName").addEventListener("submit", function(e) {

    const errors = [];
    let obj;

    obj = document.getElementById('name');
    obj.classList.toggle("error", 0)
    if (obj.value == "") {
      errors.push('Please enter your name.');
      obj.classList.toggle("error", 1)
    }

    obj = document.getElementById('yearborn');
    obj.classList.toggle("error", 0)
    if (obj.value == "") {
      errors.push('Please enter the year you were born.');
      obj.classList.toggle("error", 1)
    }

    obj = document.getElementById('age');
    obj.classList.toggle("error", 0)
    if (document.getElementById('age').value == "") {
      errors.push('Please enter your age.');
      obj.classList.toggle("error", 1)
    }

    const n = new Date().getFullYear();
    const age = +document.getElementById('age').value;
    const yearBorn = +document.getElementById('yearborn').value;
    const diff = n - yearBorn - age ;
    if (diff !== 0 && diff !== 1) {
      errors.push('Please make sure that your age and year born is correct.');
      obj.classList.toggle("error", 1)
    }
    if (errors.length > 0) {
      alert(errors.join("\n"));
      e.preventDefault();
    }  

  });
});

.error {
  border-color: red;
}

<form id="frmName" method=post action="#">
  <fieldset>
    <h1>Inf115 compulsory assignment 3</h1>
    <p>
      <b>Name:</b><input type="text" id="name" name="name" maxlength="20" />
    </p>
    <p>
      <b>Year of birth:</b><input type=int id="yearborn" maxlength="4" />
    </p>
    <p>
      <b>Age:</b><input type=int id="age" maxlength="3" />
    </p>
    <p>
      <input type="submit" value="Submit" />
      <input type="reset" value="Reset" />
    </p>
  </fieldset>
</form>

【讨论】：