ASP.NET Button 先執行 JavaScript 驗證再送出 PostBack：OnClientClick 與 return 關鍵技巧

核心原理

asp:Button 的 OnClientClick 屬性對應 HTML onclick 事件。若 JS 函式回傳 false，瀏覽器**取消**表單提交 (PostBack)；回傳 true (或無回傳) 則**繼續**送出 PostBack 觸發伺服端 OnClick。

完整實作範例

前端頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ButtonDemo.aspx.cs" Inherits="Demo.ButtonDemo" %>
<html>
<head>
    <script type="text/javascript">
        function ValidateForm() {
            var user = document.getElementById('<%= txtUser.ClientID %>').value.trim();
            var pwd = document.getElementById('<%= txtPwd.ClientID %>').value;
            var pwd2 = document.getElementById('<%= txtPwdConfirm.ClientID %>').value;
            var idNo = document.getElementById('<%= txtIdNo.ClientID %>').value.trim();
            var mobile = document.getElementById('<%= txtMobile.ClientID %>').value.trim();
            var realName = document.getElementById('<%= txtRealName.ClientID %>').value.trim();

            if (!user) { alert('請輸入帳號'); return false; }
            if (!pwd) { alert('請輸入密碼'); return false; }
            if (pwd !== pwd2) { alert('兩次密碼不一致'); return false; }
            if (!/^\d{15}$|^\d{18}$|^\d{17}[\dXx]$/.test(idNo)) { alert('身分證字號格式錯誤'); return false; }
            if (!/^09\d{8}$/.test(mobile)) { alert('手機號碼格式錯誤'); return false; }
            if (!realName) { alert('請輸入真實姓名'); return false; }

            return true; // 全部通過，允許 PostBack
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtUser" runat="server" placeholder="帳號" /><br/>
        <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="密碼" /><br/>
        <asp:TextBox ID="txtPwdConfirm" runat="server" TextMode="Password" placeholder="確認密碼" /><br/>
        <asp:TextBox ID="txtIdNo" runat="server" placeholder="身分證字號" /><br/>
        <asp:TextBox ID="txtMobile" runat="server" placeholder="手機號碼" /><br/>
        <asp:TextBox ID="txtRealName" runat="server" placeholder="真實姓名" /><br/>
        
        <asp:Button ID="btnSave" runat="server" Text="註冊" 
            OnClick="btnSave_Click" 
            OnClientClick="return ValidateForm();" />
    </form>
</body>
</html>

後端程式碼

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 也可在這裡動態註冊：btnSave.Attributes["onclick"] = "return ValidateForm();";
    }
}

protected void btnSave_Click(object sender, EventArgs e)
{
    // JS 驗證通過才會執行到這裡
    var user = new User
    {
        UserName = txtUser.Text,
        Password = HashPassword(txtPwd.Text), // 請用 BCrypt
        IdNo = txtIdNo.Text,
        Mobile = txtMobile.Text,
        RealName = txtRealName.Text,
        CreateTime = DateTime.Now
    };
    _userService.Create(user);
    Response.Redirect("Success.aspx");
}

關鍵細節

進階：jQuery 版 (非阻斷、可複用)

<script>
$(function () {
    $('#<%= btnSave.ClientID %>').on('click', function (e) {
        var $form = $(this).closest('form');
        var valid = true;
        $form.find('[data-required]').each(function () {
            if (!$(this).val().trim()) {
                alert($(this).data('required-msg') || '必填');
                $(this).focus();
                valid = false;
                return false; // break each
            }
        });
        if (!valid) { e.preventDefault(); return false; } // 阻止 PostBack
        // 這裡可加入更複雜驗證、AJAX 遠端驗證等
    });
});
</script>

<asp:TextBox ID="txtUser" runat="server" data-required="true" data-required-msg="帳號必填" />

常見錯誤

1. 忘記 return：OnClientClick="ValidateForm();" → 永遠 PostBack。
2. JS 執行錯誤：語法錯誤導致函式中斷，瀏覽器預設行為為提交，建議用 try-catch 包裹或開發者工具 Console 除錯。
3. UpdatePanel 內：需用 Sys.Application.add_load 或 PageRequestManager 重新綁定事件。

總結

OnClientClick="return ValidateForm();" 是 ASP.NET WebForm 實現「客戶端先驗證、通過才 PostBack」的標準模式。關鍵在於 JS 回傳 false 取消提交、true 繼續提交，搭配 ClientID 正確取得控制項、UseSubmitBehavior 控制渲染行為，即可輕鬆實現高體驗的表單驗證。