.net 驗證控制項和javaScript的衝突問題

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在做東西的時候偶爾同時用到javascript的事件和.net的驗證控制項，具體細節如下：
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var IsDetailsModifed = true
    function SubmitDetailModified()
        ...{
            var retvalue;
            if (IsDetailsModifed == true)
            ...{
               retvalue = confirm("Do you want to save?);
            }
            else
            ...{
            alert("No need to save because of no field modified.");
            retvalue = false
            }
            return retvalue;

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtTest" runat="server" Width="80px"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="txtTest"
            ErrorMessage="Test must be Numeric" ValidationExpression="^[0-9]{1,28}.?[0-9]{0,4}$">*</asp:RegularExpressionValidator>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return SubmitDetailModified()" />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false" />
    </div>
    </form>
</body>
上面的意圖是，在點擊按鈕的時候彈出一個確認框，如果選擇是則繼續回傳，否則阻止回傳。在回傳過程中如果某個欄位的驗證不通過，ValidationSummary 應該彈出訊息框來阻止該回傳.
但是事與願違，當我單擊按鈕的時候，如果選擇‘否’，阻止回傳，正常。
但當我選擇‘是’的時候，有兩種情況：
1. 所有欄位的驗證都通過，然後點擊‘是’，頁面繼續回傳，一切正常。
2. 當有欄位的驗證不通過的時候，點擊‘是’，驗證訊息不會彈出來，而且頁面會繼續回傳，導致操作資料不正確。
為什麼驗證訊息框會彈不出來呢？
後來，瞭解到.net驗證控制項的機制就是通過javascript來返回true或false來控制頁面是否回傳的。在上面的代碼中，如果選擇‘是’，直接在按鈕的點擊事件中返回true,頁面當然要回傳了。後來發現驗證控制項是通過給event.returnValue=true/false來實現阻止與否的。於是我改寫了My Code如下：
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript">
    var IsDetailsModifed = true
    function SubmitDetailModified()
        ...{
            var retvalue;
            if (IsDetailsModifed == true)
            ...{
               retvalue = confirm("Do you want to save ?");
            }
            else
            ...{
            alert("No need to save because of no field modified.");
            retvalue = false
            }
            if (retvalue == false)
            ...{
              event.returnValue = retvalue;
            }

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtTest" runat="server" Width="80px"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ControlToValidate="txtTest"
            ErrorMessage="Test must be Numeric" ValidationExpression="^[0-9]{1,28}.?[0-9]{0,4}$">*</asp:RegularExpressionValidator>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SubmitDetailModified()" />
        <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false" />
    </div>
    </form>
</body>
如果我選擇'是'，我什麼都不做，那就是預設的繼續回傳，但是如果有驗證不通過的欄位，驗證控制項通過event.returnValue=false來阻止頁面繼續回傳，這樣頁面就會跳出驗證不通過的對話方塊。如果我選擇‘否’，我也用event.returnValue=false的方法來阻止頁面回傳。這樣的話，就達到了最初的目的。

總結：
在使用.net的驗證控制項的時候，不要再事件中直接return true or false，而是通過event.returnValue=true/false來實現頁面的回傳阻止。

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/kucool/archive/2008/02/27/2124024.aspx

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More