如何用JavaScript实现表单年龄输入框仅接受1-100的数值？

你可以通过两种方式实现这个需求：提交表单时统一验证，或者实时验证输入内容，下面分别给出具体实现：

一、表单提交时验证 #

这种方式会在用户点击提交按钮后检查年龄是否符合要求，不符合则阻止表单提交并提示错误。

修改后的表单代码 #

<h1>Form</h1>

<form name="form" onsubmit="return validateAge()" method="post" action="">
  <div>
    <input type="text" required minlength="3" maxlength="20" placeholder="Enter your first name">
  </div>

  <div>
    <input type="text" minlength="3" maxlength="20" required placeholder="Enter your last name">
  </div>

  <div>
    <input id="age" required name="number" type="number" placeholder="Enter your age">
    <!-- 用于显示错误信息 -->
    <span id="ageError" style="color: red; display: none;">年龄必须在1-100之间</span>
  </div>

  <div>
    <input type="text" required placeholder="Enter your email">
  </div>

  <div>   
    <input type="submit" value="Submit">
  </div>
</form>

对应的JavaScript代码 #

function validateAge() {
  const ageInput = document.getElementById('age');
  const ageError = document.getElementById('ageError');
  const age = parseInt(ageInput.value);

  // 验证数值是否在1-100之间
  if (isNaN(age) || age < 1 || age > 100) {
    ageError.style.display = 'inline';
    // 阻止表单提交
    return false;
  } else {
    ageError.style.display = 'none';
    // 验证通过，允许提交
    return true;
  }
}

二、实时验证（输入时即时检查） #

这种方式会在用户输入或修改年龄时立刻验证，即时给出反馈，提升用户体验。

修改后的表单代码 #

<h1>Form</h1>

<form name="form" onsubmit="return validateAge()" method="post" action="">
  <div>
    <input type="text" required minlength="3" maxlength="20" placeholder="Enter your first name">
  </div>

  <div>
    <input type="text" minlength="3" maxlength="20" required placeholder="Enter your last name">
  </div>

  <div>
    <input id="age" required name="number" type="number" placeholder="Enter your age" oninput="checkAge()">
    <span id="ageError" style="color: red; display: none;">年龄必须在1-100之间</span>
  </div>

  <div>
    <input type="text" required placeholder="Enter your email">
  </div>

  <div>   
    <input type="submit" value="Submit">
  </div>
</form>

对应的JavaScript代码 #

// 实时检查年龄
function checkAge() {
  const ageInput = document.getElementById('age');
  const ageError = document.getElementById('ageError');
  const age = parseInt(ageInput.value);

  if (ageInput.value.trim() !== '' && (isNaN(age) || age < 1 || age > 100)) {
    ageError.style.display = 'inline';
  } else {
    ageError.style.display = 'none';
  }
}

// 提交时再次验证，防止绕过实时检查
function validateAge() {
  const ageInput = document.getElementById('age');
  const ageError = document.getElementById('ageError');
  const age = parseInt(ageInput.value);

  if (isNaN(age) || age < 1 || age > 100) {
    ageError.style.display = 'inline';
    return false;
  }
  return true;
}

补充说明 #

• 因为输入框是type="number"，浏览器会自动阻止非数值输入，但仍需验证范围和空值（虽然有required属性，但还是要处理用户输入0或101的情况）。
• 错误提示的样式可以根据你的需求调整，比如修改颜色、位置等。

内容的提问来源于stack exchange，提问作者user19716923