自定义验证器客户端函数

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 validator：

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 连接到按钮，它可以是 或 或其他一些东西。无论是什么，您只需将 onclick 事件绑定到该元素即可。例如：

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 而不是返回值，您应该得到答案。

更多信息可以在此中找到4guysfromrolla.com 文章。