javascript - 输入出生日期时如何限制允许的年龄

标签 javascript html css

<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start" value="2021-10-02">

填写表格时,仅允许年龄在 15 岁到 80 岁之间,如何做到这一点。

最佳答案

您将需要 Javascript 来实现您想要的:

HTML:

<html>

<head>
  <script src="./<your-external-js-file>"></script>
</head>

<body>

  <form>
    <label for="start">Date of birth:</label>
    <input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
    <input type="submit" />
  </form>
  
</body>

</html>

将其添加到您的外部 JS 文件中:

window.onload = function() {
      var date = new Date();
      var dd = date.getDate();
      var mm = date.getMonth() + 1;
      var yyyy = date.getFullYear();

      //Add a zero if one Digit (eg: 05,09)
      if (dd < 10) {
        dd = "0" + dd;
      }

      //Add a zero if one Digit (eg: 05,09)
      if (mm < 10) {
        mm = "0" + mm;
      }

      minYear = yyyy - 80; //Calculate Minimun Age (<80)
      maxYear = yyyy - 18; //Calculate Maximum Age (>18)

      var min = minYear + "-" + mm + "-" + dd;
      var max = maxYear + "-" + mm + "-" + dd;

      document.getElementById("start").setAttribute("min", min);
      document.getElementById("start").setAttribute("max", max);
    };

通过这样做,每当您的文档加载时,都会执行此函数,它将计算最小日期(年龄<80)和最大日期(年龄>18) 从当前日期开始,根据应用的公式,并将 'min''max' 属性设置到我们的输入字段。

关于javascript - 输入出生日期时如何限制允许的年龄,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69416308/

相关文章:

javascript - 添加/删除小部件以及调整大小不起作用

javascript - 同时显示一组图像的淡入和淡出

css - Bootstrap自定义按钮边框仅在悬停时出现

html - 响应式选择下拉选项在桌面 Chrome 浏览器移动 View 中显示为黑色矩形框

html - HTML 签名中的鼠标悬停效果

html - 更改 Bootstrap 按钮的颜色

javascript - 如何在 Angular 中处理 LocalDateTime 后端响应

javascript - 为什么 React Fibre 可能会多次调用 componentWillMount?

javascript - 在 JavaScript 中创建 deepEqual 函数

html - 无法将 Div 居中