自定义SharePoint身份验证表单提交时页面刷新导致错误消息消失问题

原有表单提交逻辑说明 #

SharePoint 内置的_spFormOnSubmitWrapper方法是默认表单提交的核心处理逻辑，主要负责两个功能：

• 校验页面内所有ASP.NET标准验证控件的校验结果，全部通过才会继续提交
• 自动打包页面内所有SharePoint客户端上下文状态、ASP.NET视图状态等隐藏字段参数，避免提交后服务端校验失败

默认登录表单向服务端提交的核心参数如下，不需要手动构造，表单提交时会自动携带：

• 业务参数：UserName（用户名输入值）、password（密码输入值）、RememberMe（记住我勾选状态）
• 系统参数：ASP.NET自带的__VIEWSTATE、__EVENTVALIDATION隐藏字段，以及SharePoint内置的_wpcmdn、_wpSelectedID等上下文参数

解决方案（按实现成本从低到高排序） #

方案1：优先使用ASP.NET原生验证控件（最推荐） #

不需要修改任何默认提交逻辑，直接在asp:Login的LayoutTemplate节点下添加RequiredFieldValidator必填校验控件即可，自带客户端+服务端双校验，不会出现页面刷新导致提示消失的问题：

<LayoutTemplate>
    <asp:Label ID = "FailureText" runat="server" />
    <asp:TextBox ID = "UserName" autocomplete="off" runat="server" Width="99%" />
    <!-- 用户名必填校验 -->
    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
        ControlToValidate="UserName" ErrorMessage="请输入用户名" 
        Display="Dynamic" ForeColor="Red" />
    <asp:TextBox ID = "password" TextMode="Password" autocomplete="off" runat="server" Width="99%" />
    <!-- 密码必填校验 -->
    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
        ControlToValidate="password" ErrorMessage="请输入密码" 
        Display="Dynamic" ForeColor="Red" />
    <asp:Button ID = "login" CommandName="Login" Text="<%$Resources:wss,login_pagetitle%>" runat="server"/>
    <asp:CheckBox ID = "RememberMe" runat="server" />
</LayoutTemplate>

方案2：保留原有提交逻辑，前置自定义JS校验 #

如果必须用自定义JS实现校验逻辑，不需要替换整个onSubmit事件，只需要重写_spFormOnSubmitWrapper方法，在原有逻辑执行前插入你的校验逻辑，校验不通过直接返回false阻止提交即可，不会触发页面刷新：

// 等待SharePoint页面加载完成后执行
_spBodyOnLoadFunctionNames.push(function() {
    // 保存原有提交逻辑的引用
    const originalSubmit = _spFormOnSubmitWrapper;
    // 重写提交包装方法
    window._spFormOnSubmitWrapper = function() {
        // 获取输入框值，注意ASP.NET控件渲染后ID会带前缀，用后缀匹配即可
        const userName = document.querySelector('input[id$="UserName"]').value.trim();
        const password = document.querySelector('input[id$="password"]').value.trim();
        const errorLabel = document.querySelector('span[id$="FailureText"]');

        // 自定义校验逻辑
        if (!userName || !password) {
            errorLabel.textContent = "用户名和密码不能为空";
            // 校验不通过，直接返回false，不会触发表单提交
            return false;
        }
        // 校验通过，执行原有提交逻辑
        return originalSubmit();
    };
});

方案3：完全自定义提交逻辑 #

如果确实需要完全替换默认提交逻辑，只需要序列化表单内所有的输入字段、隐藏字段，提交到当前页面地址即可，不需要额外构造参数，提交成功后从URL的ReturnUrl参数获取跳转地址进行跳转即可。

内容的提问来源于stack exchange，提问作者Valery Chutkov