浏览器后退时asp:CustomValidator旧校验错误提示异常显示问题

基于ASP.NET WebForm搭建的表单使用CustomValidator控件做文本框输入校验，正常提交流程表现符合预期：

• 点击提交按钮时，若文本框内容不符合校验规则，会正常显示错误提示，且不会执行提交操作
• 修正文本框内容后再次点击提交，错误提示消失，可正常跳转至下一个页面

存在的异常表现为：用户提交成功跳转到下一页面后，点击浏览器后退按钮返回原页面时，尽管文本框中显示的是已经修正后的正确内容，页面上仍然会显示之前的校验错误提示。

复现代码 #

前端代码 #

<asp:TextBox runat="server" ID="txtUsername" ValidationGroup="Register" />

<asp:CustomValidator runat="server" ID="valUsername" OnServerValidate="Validate_Username" ValidationGroup="Register" Display="Dynamic" />

<asp:LinkButton runat="server" ID="btnNext" OnClick="btnNext_OnClick" ValidationGroup="Register" CausesValidation="True" />

后端代码 #

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        valUsername.ErrorMessage = Resources.Resource.RegisterPageValidateUsername;
    }
}

protected void btnNext_OnClick(object sender, EventArgs e)
{
    Page.Validate("Register");

    if (Page.IsValid)
    {
       //执行业务逻辑后跳转
    }
}

protected void Validate_Username(object source, ServerValidateEventArgs args)
{
    var user = GetUser(txtUsername.Text);
    args.IsValid = user == null;
}

该问题由浏览器往返缓存（BFCache）机制+校验状态重置逻辑缺失共同导致：

1. 第一次输入不符合规则提交时，服务器返回的页面中CustomValidator处于IsValid = false状态，错误提示被渲染到DOM中
2. 修正内容再次提交校验通过后，服务器执行跳转逻辑，浏览器会将跳转前的页面DOM、JS执行状态快照存入往返缓存
3. 点击后退按钮时，浏览器直接从本地缓存恢复页面快照，不会重新触发服务器端校验，也不会自动重置校验控件的显示状态：此时文本框内容是浏览器自动回填的修正后正确值，但校验控件的错误提示是缓存中留存的旧状态，二者出现不同步
4. 现有代码仅在页面第一次非回发加载时设置了错误提示文本，没有主动重置校验控件的有效状态，页面从缓存恢复时没有逻辑可以清空旧的错误提示。

选择任意一种方案即可修复问题：

方案1：配置页面响应头禁用往返缓存 #

在Page_Load中添加禁用缓存的响应头，保证用户点击后退时浏览器会重新向服务器请求最新页面状态，而非读取本地缓存的旧快照：

protected void Page_Load(object sender, EventArgs e)
{
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Cache.SetNoStore();
    Response.Cache.SetExpires(DateTime.MinValue);
    
    if (!Page.IsPostBack)
    {
        valUsername.ErrorMessage = Resources.Resource.RegisterPageValidateUsername;
    }
}

方案2：页面从缓存恢复时客户端主动重置校验状态 #

如果不希望完全禁用页面缓存，可以添加客户端脚本，在检测到页面从缓存恢复时，自动清空所有校验控件的错误提示：

<script type="text/javascript">
    window.addEventListener('pageshow', function(e) {
        if (e.persisted && window.Page_Validators) {
            for (let i = 0; i < Page_Validators.length; i++) {
                const validator = Page_Validators[i];
                validator.isvalid = true;
                ValidatorUpdateDisplay(validator);
            }
        }
    });
</script>

这段逻辑会遍历页面所有ASP.NET原生校验控件，将其标记为有效状态并同步更新UI，自动隐藏留存的旧错误提示。

方案3：校验通过后使用标准重定向跳转 #

校验通过执行完业务逻辑后，调用Response.Redirect(跳转地址, true)触发完整的客户端重定向，减少浏览器缓存异常表单状态的概率。

内容的提问来源于stack exchange，提问作者Øyvind Isaksen