javascript - 如何为我的日期和时间字段编写验证？

Question

有人可以帮助我或给我一些关于如何为这两个日期和时间字段编写验证的提示，这样我就可以仅以datepicker给我的格式保存日期(11/20/2016)并按照下面的值属性中的方式计时。目前，我可以保存日期的空字段(null)和时间的“时间”，并且我希望在单击提交按钮时能够仅以给定的格式保存。我已经尝试这样做太久了，但我就是无法让它发挥作用。任何帮助将不胜感激。

<div class="form-group">
  <label class="control-label col-sm-2" for="date">Date:</label>
  <div class="col-sm-2" class="dpckr">
    <!-- <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/> -->
    <input id="date" type="text" class="form-control datepicker" name="date" value="Click to select date" required>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="text">Hour:</label>
  <div class="col-sm-2">
    <select class="form-control sct" id="time" name="time">
      <option value="">Time</option>
      <option value="10am">10:00-10:30</option>
      <option value="1030am">10:30-11:00</option>
      <option value="11am">11:00-11:30</option>
      <option value="1130am">11:30-12:00</option>
    </select>
  </div>
</div>
<button id="saveAppt" type="submit" class="btn btn-default">Submit</button>

Answer 1

使用正则表达式，可以匹配数字模式，例如 99/99/9999，但正如您所看到的，在验证日期时需要检查更多内容。月份应在 01-12 范围内，天数应在 01-31 之间，具体取决于当月(和闰年)。

对于问题的日期验证部分，我引入了另一个库 moment.js 。您也许可以使用 Date.parse() vanilla Javascript，但如果您可以使用 Moment，它会更强大。

下面我提供了一个 validate 函数，该函数执行以下几项操作:1) 正则表达式匹配日期格式，2) 如果找到匹配项，则使用 Moment 库验证匹配的值。如果两个验证都通过，则记录 true，否则记录 false。您可以尝试下面的代码片段。

function validate() {
    
    // regex pattern to match MM/DD/YYYY
    var pattern = /\d{2}\/\d{2}\/\d{4}/;
    var date = document.getElementById('datepicker').value;
    
    // RegExp.test returns explicit true or false if match is found or not
    var isMatch = pattern.test(date);
    
    // if a match is found, we still need to validate it as a proper date
    if (isMatch) {
        var strict = true; // require strict match, see moment docs
        var format = 'MM/DD/YYYY';
        var isValid = moment(date, format, strict).isValid();
        if (isValid)
            console.log('valid');
        else
            console.log('not valid');
    } else {
        console.log('not valid');
    }
}

<script src="https://momentjs.com/downloads/moment.min.js"></script>
<input id="datepicker" value="01/24/1982">
<button onclick="validate()">Match</button>