程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> 關於ASP.NET >> 讓.Net驗證控件與自定義驗證合作無間

讓.Net驗證控件與自定義驗證合作無間

編輯:關於ASP.NET

場景:
一個注冊表單,其間有.Net自帶的驗證控件,但有一些驗證必須得借助於另外的一些js,如驗證是否復選了注冊協議(這裡為了說明,只舉這樣一個簡單的例子)。
這樣的話,會涉及到二次驗證,第一次可能是.Net驗證控件的驗證,第二次會認證用戶有沒有復選注冊協議,如何讓這二者合作無間呢?
這裡不得不提到.Net的Page_ClientValidate()函數,該函數返回當前Page頁中的表單有沒有通過Validate的驗證.


新建一個Page頁面,簡單的放一些控件

  1. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  2.         <asp:Button ID="Button1" runat="server"   Text="Button"    
  3.             ValidationGroup="submit" CausesValidation="True"    
  4.             onclick="Button1_Click" />  
  5.         <input type="checkbox" id="checkbox" />我已閱讀注冊協議       
  6.         <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"    
  7.             ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="不能為空"    
  8.             ValidationGroup="submit"></asp:RequiredFieldValidator>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server"   Text="Button" 
            ValidationGroup="submit" CausesValidation="True" 
            onclick="Button1_Click" />
        <input type="checkbox" id="checkbox" />我已閱讀注冊協議    
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="不能為空" 
            ValidationGroup="submit"></asp:RequiredFieldValidator>

頁面呈現
圖片可能已被縮小,點擊查看原圖
TextBox留空,點擊Button,會進行一次驗證,當在TextBox中輸入文本時,再點擊提交,驗證通過,引發OnClick事件,但用戶是否復選了注冊協議此處還未做判斷。
圖片可能已被縮小,點擊查看原圖
此時需要我們手寫驗證函數了
  1. <script type="text/javascript">   
  2.         function test() {   
  3.             var isCheck = document.getElementById('checkbox').checked;   
  4.             if (isCheck) {   
  5.           //Page_ClientValidate('submit'),這裡有不同的ValidGroup,所以Page_ClientValidate傳遞是指定的GroupName   
  6.                 if (Page_ClientValidate('submit')) {   
  7.                     alert('驗證成功');   
  8.                     return true;   
  9.                 }   
  10.             }   
  11.             else {   
  12.                 alert('您必須同意注冊協議');   
  13.                 return false;   
  14.             }   
  15.   
  16.             return false;   
  17.         }   
  18.     </script>  
<script type="text/javascript">
        function test() {
            var isCheck = document.getElementById('checkbox').checked;
            if (isCheck) {
	      //Page_ClientValidate('submit'),這裡有不同的ValidGroup,所以Page_ClientValidate傳遞是指定的GroupName
                if (Page_ClientValidate('submit')) {
                    alert('驗證成功');
                    return true;
                }
            }
            else {
                alert('您必須同意注冊協議');
                return false;
            }

            return false;
        }
    </script>

修改後的代碼
  1. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  2.        <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="submit" CausesValidation="True"  
  3.            OnClientClick="return test();" OnClick="Button1_Click" />  
  4.        <input type="checkbox" id="checkbox" />我已閱讀注冊協議   
  5.        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"  
  6.            Display="Dynamic" ErrorMessage="不能為空" ValidationGroup="submit"></asp:RequiredFieldValidator>  
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="submit" CausesValidation="True"
            OnClientClick="return test();" OnClick="Button1_Click" />
        <input type="checkbox" id="checkbox" />我已閱讀注冊協議
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
            Display="Dynamic" ErrorMessage="不能為空" ValidationGroup="submit"></asp:RequiredFieldValidator>

預覽頁面
圖片可能已被縮小,點擊查看原圖
圖片可能已被縮小,點擊查看原圖
圖片可能已被縮小,點擊查看原圖
到這裡好像已經結束了,但查看html源代碼會發現:
  1. <input type="submit" name="Button1" value="Button"    
  2. onclick="return test();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "submit", "", false, false))" id="Button1" />  
<input type="submit" name="Button1" value="Button" 
onclick="return test();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "submit", "", false, false))" id="Button1" />

Button1除了有return test()外還有WebForm_DoPostBackWithOptions這樣一段,很明顯WebForm_DoPostBackWithOptions是不會被執行的,去掉這段也很簡單,
將Button1的CausesValidation設為false即可。

當然,你也可以完全不用驗證控件來實現。
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved