是否可以通过使用javascript中的正则表达式来计算以输入年份为出生年龄的年龄？

debugcn 发表于 Dev

通用汽车

所提供代码的目的是以一种动态的方式确定年龄在15到60岁之间的范围，并且该方法有效。现在，使用HTML5输入标签的Benefits Pattern属性，我想知道是否摆脱了javascript，并仅对pattern属性使用正则表达式来执行此操作。

html代码：

<body>
  <div class="test">
    <form action="test.html" method="post">
      <table>
        <tbody>
          <tr>
            <th colspan="3">DATE</th>
          </tr>
          <tr>
            <td>
              <input id="YEAR" name="R4" value="" placeholder="YEAR" type="text" required="required" pattern="^(19[4-9]{1}[0-9]{1}|200[1]{1})$">
              <input id="MONTH" name="R6" value="" placeholder="MONTH" type="text" required="required" pattern="^0[1-9]|1[0-2]$">
              <input id="DAY" name="R7" value="" placeholder="DAY" type="text" required="required" pattern="^0[1-9]|1\d|2\d|3[0-1]$">
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <button name="insert" type="button" onclick="dob()">INSERT</button>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</body>

CSS代码：

@CHARSET "UTF-8";
body {
  margin: 0;
  padding: 0;
  background: #D0D0D5;
  font-family: monospace;
  font-size: 16px;
}

input {
  width: 49px;
  height: 15px;
  font-size: small;
}

button[type="button"] {
  width: 100%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.test {
  position: absolute;
  width: 200px;
  top: 10px;
  left: 15px;
  border: 1px solid grey;
  border-radius: 6px;
  box-shadow: 3px 3px #383333
}

** javascript代码：**来自： 计算JavaScript的年龄

function dob() {
  var year = document.getElementById('YEAR').value;
  var month = document.getElementById('MONTH').value;
  var day = document.getElementById('DAY').value;
  var today = new Date();
  var age = today.getFullYear() - year;
  if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day)) {
    age--;
  }
  alert(age);
}

JSFiddle

提前致谢。

TeaCoder

恕我直言，在这种情况下，使用数字输入类型而不是文本更有意义。无需编写所有复杂的正则表达式来解析文本字段中的用户输入。

我将像下面那样更改DOB字段，这使它变得更加容易。

<input id="YEAR" name="R4" placeholder="YEAR" type="number" required min="1949" max="2016" step="1">
<input id="MONTH" name="R6" placeholder="MONTH" type="number" required min="1" max="12" step="1" >
<input id="DAY" name="R7" placeholder="DAY" type="number" required min="1" max="31" step="1">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。