Question

我有一个自定义验证器（.net 3.5），用于检查表单中的四个下拉列表是否具有重复值。它适用于服务器端，但我想添加一个客户端功能。我不懂JavaScript。你能帮忙吗？唔谢谢。

 <asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage = "Same related document was entered more than once" OnServerValidate="dropDownValidation_ServerValidate" Display="Dynamic"></asp:CustomValidator>


   Protected Sub dropDownValidation_ServerValidate(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
    e.IsValid = Not haveSameValue(DropDownList9.SelectedValue, DropDownList12.SelectedValue) AndAlso _
                Not haveSameValue(DropDownList9.SelectedValue, DropDownList15.SelectedValue) AndAlso _
                Not haveSameValue(DropDownList9.SelectedValue, DropDownList18.SelectedValue) AndAlso _
                Not haveSameValue(DropDownList12.SelectedValue, DropDownList15.SelectedValue) AndAlso _
                Not haveSameValue(DropDownList12.SelectedValue, DropDownList18.SelectedValue) AndAlso _
                Not haveSameValue(DropDownList15.SelectedValue, DropDownList18.SelectedValue) 
    End Sub

    Protected Function haveSameValue(ByVal first As String, ByVal second As String) As Boolean
    If first <> "" And second <> "" AndAlso first.Equals(second) Then
        Return first.Equals(second)
    End If
   End Function

更新：以下JavaScript代码可以正常工作，因为它会检查下拉列表中是否存在重复值。但是，如何将其链接到我的自定义验证器并消除警报消息。现在，页面已提交。感谢。

  function dropDownValidation_ClientValidate() { 

    var strValue1 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList1');  
    var strValue2 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList2'); 
    var strValue3 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList3'); 
    var strValue4 = document.getElementById('ctl00_ContentPlaceHolder1_DropDownList4'); 

         var result = haveSameValue(strValue1.value, strValue2.value) &&
          haveSameValue(strValue1.value, strValue3.value) &&
          haveSameValue(strValue1.value, strValue4.value) &&
          haveSameValue(strValue2.value, strValue3.value) &&
          haveSameValue(strValue2.value, strValue4.value) &&
          haveSameValue(strValue3.value, strValue4.value);

          return result; 


           }

function haveSameValue(ddlValue1, ddlValue2) {

  if (ddlValue1 != null && ddlValue1 != '' && ddlValue2 != null && ddlValue2 != '' && ddlValue1 == ddlValue2){
    alert("Related documents contain duplicate values");

    }

}

Answer 1

不使用任何库（例如jQuery），最简单的方法可能就是：

HTML：

<select id="dropdown1">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<select id="dropdown2">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<select id="dropdown3">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<select id="dropdown4">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<button id="submitbutton">Submit</button>

JavaScript验证器：

var validator = function() {
    var objChosenItems = {};
    var strDuplicateItem = null;
    for (var i = 1; i <= 4; i++) {
        var strValue = document.getElementById('dropdown' + i.toString()).value;
        if (objChosenItems[strValue]) {
            strDuplicateItem = strValue;
            break;
        }
        objChosenItems[strValue] = true;
    }
    if (strDuplicateItem === null) {
        return true;
    }
    else {
        alert("DUPLICATE ITEM: " + strDuplicateItem);
        return false;
    }
};

您需要将validator连接到该按钮，该按钮可以是<input type="submit/image/etc" />或<button>或其他几项内容。无论是什么，您都可以将onclick事件绑定到元素。 E.g：

document.getElementById('submitbutton').onclick = validator;

或

<input type="button" onclick="validator()" />

或者

<form action="mysite.aspx" method="post" onsubmit="validator()">

Answer 2

我想你需要这样的事情：

<asp:CustomValidator id="CustomValidator1" runat="server" 
    ErrorMessage = "Same related document was entered more than once" 
    OnServerValidate="dropDownValidation_ServerValidate" Display="Dynamic"
    ClientValidationFunction="dropDownValidation_ClientValidate();">
</asp:CustomValidator>

<script type="text/javascript">
    function dropDownValidation_ClientValidate() {
        var result =
            (haveSameValue('<%= DropDownList1.ClientID %>', '<%= DropDownList2.ClientID %>') == false) &&
            (haveSameValue('<%= DropDownList2.ClientID %>', '<%= DropDownList3.ClientID %>') == false) &&
            (haveSameValue('<%= DropDownList3.ClientID %>', '<%= DropDownList4.ClientID %>') == false) &&
            (haveSameValue('<%= DropDownList4.ClientID %>', '<%= DropDownList5.ClientID %>') == false);
        return result;
    }

    function haveSameValue(ddl1, ddl2) {
        var result = false;
        var value1 = document.getElementById(ddl1).value;
        var value2 = document.getElementById(ddl2).value;

        if (value1 != null && value1 != '' && value2 != null && value2 != '' && value1 == value2) {
            result = true;
        }
        return result;
    }
</script>

你能检查它是否有效吗？

Answer 3

这已经过时了，但我想在这里给出一个答案，因为我在回答谷歌搜索类似问题时得到了答案。

在你的Javascript函数中，它将需要2个参数，source和args。您希望将args.IsValid设置为true或false，具体取决于验证是否成功。如果您要验证特定字段，args.Value将是要验证的表单字段的值。

检查表单是否等于“1”的简单验证器函数如下所示：

function validateThis(source, args) { 
    if (args.Value == "1") 
        args.IsValid = true; 
    else 
        args.IsValid = false;
}

将此与上述答案相结合并设置args.IsValid而不是返回，您应该得到答案。

更多信息可在this 4guysfromrolla.com article中找到。

自定义验证器客户端功能

3 个答案: