Question

有人可以帮我或者给我一个关于如何为这两个日期和时间字段编写验证的提示，这样我就可以只保存datepicker给我的格式的日期（2016年11月11日））和它在下面的值属性中的时间。目前我可以为日期和＆＃34;时间＆＃34;保存一个空字段（null）。时间和我希望能够在单击submit按钮时以给定格式保存。我一直试图这样做太久了，但我根本无法让它发挥作用。任何帮助将不胜感激。

<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>

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

1 个答案: