ASP.NET MVC3:正在验证日期时间和自定义验证消息

ASP.NET MVC3: Validating Date Times and Custom Validation messages

本文关键字：验证 日期 时间 自定义 消息 NET MVC3 ASP      更新时间：2023-09-26
  1. 如何防止用户在日期时间选择器(文本字段(中键入，但允许他们使用日期时间选择器
  2. 如何验证一个日期在另一个日期之后，并像ASP.Net MVC3那样内联显示(并阻止提交(。javascript与其说是一个接一个地检查它的问题，不如说是我如何显示这个内联消息并阻止提交，将它与其他验证联系起来

到目前为止，我有

            $("#Save").click(function (e) {
                if (  $('#EndTime').val() < $('#StartTime').val() )
                    alert("AHRR"); // Should add an inline message and NOT submit.
            });

为了防止在datetimepicker字段中键入内容，请使用jQuery挂接keyup事件，并清除字段中的任何文本。假设您使用的是jquery 1.6或更早版本，代码如下所示：

$("input[id$='Time']").live("keyup", function() {
    $(this).val("");
});

此外，您可以考虑添加一个占位符属性，指示用户不要键入日期。

至于比较日期验证器，您会在这个问题中找到一个很好的例子：MVC3自定义验证：比较两个日期

我建议使用jQuery的日期选择器在客户端进行日期范围约束。您需要禁用输入元素<input readonly/>。我最近实现了一个适用于我的日期范围限制。它将结束日期限制在开始日期的90天内

仅供参考，我停止了使用startElement和endElement作为测试，再也没有回去过，因为这段代码目前没有被重用。

// ============================================================================
// FUNCTION: InitializeDates(startElement, endElement)
// PARAMETERS
// ----------
// startElement:    The element which will be initialized as the start-date 
//                  datepicker.
//
// endElement:      The element which will be initialized as the start-date 
//                  datepicker.
//
// DESCRIPTION
// -----------
// InitializeDates updates the start and end dates for non-employees.  It 
// creates a date-picker object on both fields and then constrains the end 
// end date:
// * No date selections available prior to the start date
// * No date selections available after 90 days beyond the start date.
// ----------------------------------------------------------------------------
function InitializeDates(startElement, endElement)
{
    $("#f-start-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        onSelect: function(dateText, inst) { StartDateSelected(dateText, inst) }
    });
    $("#f-end-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        numberOfMonths: 3
    });
    $("#f-start-date").val('');
    $("#f-end-date").val('');
}
// ============================================================================
// FUNCTION: StartDateSelected(dateText, endElement)
// PARAMETERS
// ----------
// dateText:    The dateText passed from jQuery.datepicker.onSelect
// inst:        The instpassed from jQuery.datepicker.onSelect//
//
// DESCRIPTION
// -----------
// Updates the end-date maxDate and minDate fields to 91 dates from the selected
// start date.
// ---------------------------------------------------------------------------
function StartDateSelected(dateText, inst)
{
    var second = 1000;
    var minute =second * 60;
    var hour = minute * 60;
    var day = hour * 24;
    // The datepicker updates maxDate and minDate based on today's date.  I've
    // got to math out dates so that the maxDate is actually 91 days from the
    // selected date.  
    var todaysDate = new Date();
    var selectedDate = new Date(dateText);          
    var duration = Math.floor((selectedDate - todaysDate) / day) + 91;
    $("#f-end-date").datepicker("option", "minDate", selectedDate);
    $("#f-end-date").datepicker("option", "maxDate", duration);
    $("#f-end-date").val('');
}

  1. 禁用输入框：<input type="text" disabled="disabled"/>然后使用日期选择器将值插入文本框。

  2. 您可以禁用表单上的提交按钮，直到日期验证正确为止。您可以为此编写自定义javascript，但它只能在客户端进行验证。您还可以在MVC 3中编写一个自定义验证器来验证日期。

有关详细信息，请参阅JQuery验证。MVC 3使用JQuery库来执行验证，您可以覆盖这些方法来实现日期验证。

相关文章：