Question

如果为用户提供了可供选择的时间列表，我如何验证所选时间是否正确，我想使用以下标准验证所选时间范围：

1）不是过去（换句话说，不是在此之前）
2）选定的时间必须比当前时间至少大30分钟

Here is the HTML snippet from my form:
<select id="callBackTime" tabindex="9" name="callBackTime">
<option value="8:00 AM - 8:30 AM">8:00 AM - 8:30 AM</option>
<option value="8:30 AM - 9:00 AM">8:30 AM - 9:00 AM</option>
<option value="9:00 AM - 9:30 AM">9:00 AM - 9:30 AM</option>
<option value="9:30 AM - 10:00 AM">9:30 AM - 10:00 AM</option>
<option value="10:00 AM - 10:30 AM">10:00 AM - 10:30 AM</option>
</select>

我正在使用jQuery.validator.addMethod（）来添加我自己的规则，这是我到目前为止所拥有的：

Here is my JQuery Custom rule Validation so far:
$.validator.addMethod (
  "timeToCall", 
    function(value, element) {
    var timeSelected = $('#callBackTime').val();
    var today = new Date();
    var currentTime = today.getHours() + ':' + today.getMinutes();
    return Date.parse(timeSelected) > Date.parse(currentTime);
  }, 
  "*Please select a later time."
);

Here is the code to trigger the validation:
  $('#submit').click(function(e) {
     $("#supportCallBackForm").validate({

      rules: { 
      callBackTime: { timeToCall : true }
      },

     submitHandler: function(form) {
     // do other things for a valid form
     submitCallBackSupportRequest();
     return false;
    }
   });
});

我认为我的自定义.validator方法是我需要最多帮助的地方。我不知道如何正确比较用户选择的内容和当前时间，此外所选时间必须至少大于30分钟。非常感谢任何帮助。

Answer 1

看看moment.js。您可以通过这种方式获得当前时间加30分钟：

var smallestAllowedTime = moment().add("m",30);

然后，如果用户选择8:30 - 9:00，如果您将8和30解析为通话时间的“地板”“小时和分钟”，则可以进行比较非常容易：

var hour = 8; // parsed from selection
var minute = 30; // parsed from selection
var userSelectedTime = moment().set("hour",hour).set("minute",minute);
return userSelectedTime.isAfter(smallestAllowedTime);

这还没有考虑上午/下午或时区。

Answer 2

我会建议一些改变。首先，如果您可以按如下方式进行选择

<select id="callBackTime" tabindex="9" name="callBackTime">
    <option value="20:00 - 20:30">8:00 PM - 8:30 PM</option>
    <option value="20:30 - 21:00">8:30 PM - 9:00 PM</option>
    ....
    ....
    <option value="08:30 - 09:00">8:30 AM - 9:00 AM</option>
</select>

当然，请注意单位数小时的两位数

它将使解析更容易。

在您的验证器中，您可以这样做

$.validator.addMethod (
  "timeToCall", 
    function(value, element) {
    var now = new date();
    var timeSelected = $('#callBackTime').val();
    var startHour = timeSelected.substr(0,2);
    var startMin = timeSelected.substr(3,2);
    var endHour = timeSelected.substr(9,2);
    var endMin = timeSelected.substr(12,2);
    // depending on whether you are interested in the beginning of the timespan or the end
    var startTimeInMinutes = (startHour * 60) + startMin;
    var targetTimeInMinutes = (now.getHours() * 60) + now.getMinutes();
    return startTimeInMinutes + 30 > targetTimeInMinutes;
 }, 
  "*Please select a later time."
);

我实际上没有运行此代码所以我肯定会检查结果的子字符串，是否必须在将它们相乘之前解析字符串以及*是否在+

之前执行

我对这些事情很不满意。

祝你好运，如果你需要更多，请告诉我。

jQuery验证选定的时间不是过去的，使用JavaScript在当前时间之前至少30

2 个答案: