自定義驗證器客戶端功能

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 

UPDATE：下面的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事件綁定到元素即可。例如： -

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個參數，源和參數。您希望根據驗證是否成功將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找到。