使用 javascript 对 aspx 页面上的用户控件进行验证

Question

我有一个用户控件，其中包含 3 个下拉菜单（日期、月份、年份）。我在 aspx 页面上调用了这个用户控件。

请选择日期自。

在我的 aspx 页面上，所有字段都使用 javascript 验证进行验证。 当我从此用户控件中选择日期（不是月份和年份）并单击提交按钮时，它会显示错误消息。 但我的问题是，如果我选择年份（不是日期，月份），那么在这种情况下，它既不会触发错误消息，也不会保存数据。 我希望每次未选择至少一个字段（日、月、年）时它都会触发消息。我想在客户端处理这个问题。请给我你的建议。

function InputValidation(vg) {
    var isValid = true;
    try {
        var j = 0;
        var inputCtrlArr = new Array();
        var key = 'block';
        var inputIntputArr = document.getElementsByTagName('input');
        var inputDdlArr = document.getElementsByTagName('select');
        var inputTextareaArr = document.getElementsByTagName('textarea');
        var c = 0;
        for (var i = 0; inputIntputArr.length > i; i++) inputCtrlArr[c++] = inputIntputArr[i];
        for (var i = 0; inputDdlArr.length > i; i++) inputCtrlArr[c++] = inputDdlArr[i];
        for (var i = 0; inputTextareaArr.length > i; i++) inputCtrlArr[c++] = inputTextareaArr[i];
        for (var i = 0; inputCtrlArr.length > i; i++) {
            if (inputCtrlArr[i].getAttribute('required') == 'true' && inputCtrlArr[i].getAttribute('vg') == vg) {
                if (inputCtrlArr[i].value.trim() == '') {
                    //errinputReqCtrlArr[j++] = inputCtrlArr[i];
                    key = 'block';

                    isValid = false;
                }
                else {
                    key = 'none';
                }
                if (inputCtrlArr[i].type == "checkbox") {
                    if (inputCtrlArr[i].checked == false) {
                        //errinputReqCtrlArr[j++] = inputCtrlArr[i];
                        key = 'block';

                        isValid = false;
                    }
                    else {
                        key = 'none';
                    }
                }
                var errorDivId = inputCtrlArr[i].getAttribute('ErrorDivId');
                var objErrorDivId = document.getElementById(errorDivId);
                if (objErrorDivId != null) objErrorDivId.style.display = key;
            }
        }
 }
    catch (ex) { }

}



function InputCntrlValidate(obj) {
    try {
        if (obj.getAttribute('required') == 'true') {
            if (obj.value == '') {
                key = 'block';
            }
            else {
                key = 'none';
            }
            var errorDivId = obj.getAttribute('ErrorDivId');
            var objErrorDivId = document.getElementById(errorDivId);
            if (objErrorDivId != null) objErrorDivId.style.display = key;
        }
    } catch (ex) { }
}




function sanitizeInput(obj) {

    if (obj.getAttribute('msg') == obj.value) {
        alert("same value");
    }

}

Answer 1

问题出在您的 JavaScript 中。因为如果它适用于一个下拉列表，那么它应该适用于其他两个。此外，您将不得不检查月份和日期。如果是 2 月，那么天数应该是 28 或 29，这取决于年份。所以需要付出很多努力才能解决。

Answer 2

您只需要三个RequiredFieldValidators，每个ControlToValidate 指向您的一个DropDownLists。如果您的默认值为 f.e. “请选择”您应该将其设置为验证器的InitialValue。

这是一个示例（我只添加了几个 ListItems 而不是所有日期、月份和年份）：

    <asp:DropDownlist ID="DdlDate" runat="server">
        <asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
        <asp:ListItem Text="1"></asp:ListItem>
        <asp:ListItem Text="2"></asp:ListItem>
        <asp:ListItem Text="3"></asp:ListItem>
    </asp:DropDownlist>
    <asp:RequiredFieldValidator ID="ReqDate" 
        ControlToValidate="DdlDate" 
        InitialValue="please select" 
        ErrorMessage="Please select Date"
        Display="Dynamic"
        runat="server">
    </asp:RequiredFieldValidator>
    <asp:DropDownlist ID="DdlMonth" runat="server">
        <asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
        <asp:ListItem Text="January"></asp:ListItem>
        <asp:ListItem Text="February"></asp:ListItem>
        <asp:ListItem Text="March"></asp:ListItem>
    </asp:DropDownlist>
    <asp:RequiredFieldValidator ID="ReqMonth" 
        ControlToValidate="DdlMonth" 
        InitialValue="please select" 
        ErrorMessage="Please select Month"
        Display="Dynamic"
        runat="server" >
    </asp:RequiredFieldValidator>
    <asp:DropDownlist ID="DdlYear" runat="server">
        <asp:ListItem Text="please select" Enabled="true"></asp:ListItem>
        <asp:ListItem Text="2010"></asp:ListItem>
        <asp:ListItem Text="2011"></asp:ListItem>
        <asp:ListItem Text="2012"></asp:ListItem>
    </asp:DropDownlist>
    <asp:RequiredFieldValidator ID="ReqYear" 
        ControlToValidate="DdlYear" 
        InitialValue="please select" 
        ErrorMessage="Please select Year"
        Display="Dynamic"
        runat="server" >
    </asp:RequiredFieldValidator>
    <asp:Button ID="BtnSubmit" runat="server" Text="submit" />

Answer 3

如果是我，我会在AjaxControlToolKit 上使用calendar control。除非该字段是强制性的，否则不需要验证。它更容易，看起来更好。所有客户端。

只需下载 ajxcontrolkit dll 并将其包含在您的项目中并根据任何自定义控件/第三方组件使用。

编辑：

好的，如果您只想选择至少一个下拉菜单，请尝试 JQuery，例如

function isDropDownsValid()
{
var isValid = true;
$('select').map(function()
            {
                if($(this).val() == -1)
                {
                    isValid = false;
                }
            });
return isValid;
}

然后像这样连接到您的提交按钮

  <asp:Button ID="myButton" runat="server" OnClientClick="return isDropDownsValid" Text="Submit />

这是一个带有演示的fiddle。您可能需要更改选择器 $('select') 以定位您需要的确切下拉列表。