时间戳

首页 > 解决方案 > 以 html 形式验证正确年龄的问题

javascript - 以 html 形式验证正确年龄的问题

问题描述

我想确保出生年份的年龄是正确的，其中两个值都以 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>

标签： javascripthtmlformsvalidation

解决方案

  1. document.getElementById 中缺少文档

  2. 年龄错误 - 用户可能还不是 n - yearBorn

  3. 无效的 HTML，字段集应在表单内

  4. 我强烈建议使用 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>

推荐阅读