ASP.NET中如何每次触发多个TextBox控件绑定的客户端CustomValidator验证

1. 调整前端控件配置 #

给所有TextBox和CustomValidator添加统一的ValidationGroup属性，同时给每个TextBox添加blur事件监听，代码如下：

<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="AscValGroup" onblur="ValidateAllAscInputs()" />
<asp:CustomValidator ID="cv1" runat="server"
                     ClientValidationFunction="JSValidate"
                     ControlToValidate="TextBox1" Display="Dynamic" 
                     ErrorMessage="!" ValidationGroup="AscValGroup"/>
<asp:TextBox ID="TextBox2" runat="server" ValidationGroup="AscValGroup" onblur="ValidateAllAscInputs()" />
<asp:CustomValidator ID="cv2" runat="server"
                     ClientValidationFunction="JSValidate"
                     ControlToValidate="TextBox2" Display="Dynamic" 
                     ErrorMessage="!" ValidationGroup="AscValGroup"/>
<asp:TextBox ID="TextBox3" runat="server" ValidationGroup="AscValGroup" onblur="ValidateAllAscInputs()" />
<asp:CustomValidator ID="cv3" runat="server"
                     ClientValidationFunction="JSValidate"
                     ControlToValidate="TextBox3" Display="Dynamic" 
                     ErrorMessage="!" ValidationGroup="AscValGroup"/>

说明：ValidationGroup不仅支持服务端PostBack校验，ASP.NET也提供了客户端API可以直接触发指定分组的全量校验，无需提交表单。

2. 修改后台注册的JavaScript逻辑 #

调整校验函数符合CustomValidator的参数规范，同时新增全量校验触发函数：

string customValidation= @"
// CustomValidator固定要求的入参：source为当前校验器对象，args用于返回校验结果
function JSValidate(source, args){
    // 取值时可根据实际项目的ClientID生成规则调整，也可提前在后台注册控件客户端ID变量简化代码
    const val1 = Number(document.getElementById('<%= TextBox1.ClientID %>').value || 0);
    const val2 = Number(document.getElementById('<%= TextBox2.ClientID %>').value || 0);
    const val3 = Number(document.getElementById('<%= TextBox3.ClientID %>').value || 0);
    // 判断是否为升序
    args.IsValid = val1 <= val2 && val2 <= val3;
}
// 触发指定分组的全量客户端校验，自动更新所有校验器的错误提示
function ValidateAllAscInputs(){
    // 调用ASP.NET原生客户端校验API，传入分组名即可，无需PostBack
    Page_ClientValidate('AscValGroup');
}
";

ScriptManager.RegisterStartupScript(this, typeof(string), "ConfigurationCustomValidationScripts", customValidation, true);

效果说明 #

任意一个输入框失去焦点时，都会触发整个分组的校验逻辑，三个输入框对应的CustomValidator都会重新执行校验，错误提示会根据最新的输入值自动显示/隐藏，不需要修改其他逻辑。

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