使用ASP.NET CustomValidator

时间:2016-05-11 10:06:38

标签: javascript asp.net

我有一个以这种方式定义的ASP.NET页面:

<asp:TextBox 
    ID="_txtExitDate"
    ClientIDMode="Static"
    runat="server"
    Text='<%#Bind("exit_date","{0:dd/MM/yyyy}")%>'
    placeholder="gg/mm/aaaa" />
<asp:CompareValidator
    runat = "server" 
    Type = "Date" 
    Operator = "DataTypeCheck"
    Display = "Dynamic"
    ControlToValidate = "_txtExitDate" 
    ErrorMessage = "Exit date invalid." 
    SetFocusOnError = "true" />
<asp:CustomValidator 
    Display="Dynamic"
    runat="server" 
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ControlToValidate="_txtExitDate" 
    ErrorMessage="Exit date should be minor of today date." />

<asp:TextBox 
    ID="_txtExitTime"
    ClientIDMode="Static"
    CssClass="input_small"
    runat="server"
    Text='<%#Bind("exit_time")%>'
    placeholder="hh:mm" />
<asp:RegularExpressionValidator
    Display = "Dynamic"
    ControlToValidate="_txtExitTime"
    runat="server"
    ErrorMessage="Exit time invalid"
    ValidationExpression="^([01][0-9]|2[0-3]|[1-9]):([0-5][0-9]|[0-9])$"
    SetFocusOnError = "true" />
<asp:CustomValidator 
    Display="Dynamic"
    runat="server" 
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ControlToValidate="_txtExitTime" 
    ErrorMessage="Exit date should be minor of today date." />

评估CustomValidators的Javascript代码是:

function Validate_Exit(sender, args) {
    var _txtExitDate = $("input[id$='_txtExitDate ']");
    var _txtExitTime = $("input[id$='_txtExitTime ']");

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) {
        args.IsValid = true;
        return;
    }

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5);
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss");

    if (_exit.isAfter(moment())) {
        args.IsValid = false;
        return;
    }

    args.IsValid = true;
}

表单的范围是允许用户仅输入有效的日期/时间值。特别是CustomValidator旨在允许输入几个应该小于当前日期时间的组合值。

它的效果与我预期的一样,除了副作用,它没有妥协,但它在图形上很烦人。

正如您所看到的,CustomValidator基本相同,并且它适用于两个文本框。如果用户未能写出正确的日期/时间组合,则会显示该消息(该消息是相同的消息,因为它是指组成的日期/时间值)。在某些情况下,错误消息会显示两次&#39;这部分(图形上)可怕,但对用户来说也有点混乱。 有没有办法避免重复此检查并为两个文本框提供控件,以便用户不会被双重错误消息混淆?

祝你好运,  麦克

1 个答案:

答案 0 :(得分:1)

您可以使用单个CustomValidator来验证这两个字段。设置该验证器的ID但不设置ControlToValidate属性(这里我也设置了Text属性以显示指示符,即使没有触发回发):

<asp:CustomValidator 
    ID="cvDateTime"
    Display="Dynamic"
    runat="server" 
    Text="Invalid date!"
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ErrorMessage="Exit date should be minor of today date." />

您可以在两个TextBox上设置onchange事件处理程序,以便在每个字段修改后立即执行验证:

<asp:TextBox ID="_txtExitDate" onchange="ValidateOnChange();" ... />
<asp:TextBox ID="_txtExitTime" onchange="ValidateOnChange();" ... />

验证功能可能如下所示:

function ValidateOnChange() {
    var validator = document.getElementById('<%= cvDateTime.ClientID %>');
    validator.isvalid = DoValidateDateTime();
    ValidatorUpdateDisplay(validator)
}

function Validate_Exit(source, args) {
    args.IsValid = DoValidateDateTime();
}

function DoValidateDateTime() {
    var _txtExitDate = $("input[id$='_txtExitDate ']");
    var _txtExitTime = $("input[id$='_txtExitTime ']");

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) {
        return true;
    }

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5);
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss");

    return _exit.isSameOrBefore(moment());
}