哪个 HTML 元素的事件是 asp:RegularExpressionValidator 客户端验证绑定？答案

【问题标题】：To which HTML element's event is an asp:RegularExpressionValidator client side validation bound?哪个 HTML 元素的事件是 asp:RegularExpressionValidator 客户端验证绑定？
【发布时间】：2018-04-28 16:20:13
【问题描述】：

这是一个关于 ASP.NET WebForms asp:RegularExpressionValidator 的客户端 (javascript) 验证如何工作的非常具体的问题。 注意：这与实际的正则表达式无关！

我的目标是在客户端注册一个在正则表达式验证之前得到处理的事件。

考虑以下代码（简化，来自 .aspx 页面）

<asp:TextBox ID="TextBoxMultiId" runat="server" />
<asp:RegularExpressionValidator 
ID="RegularExpressionValidatorMultiId" runat="server" Display="Dynamic"
ControlToValidate="TextBoxMultiId" ErrorMessage="Oops!"
SetFocusOnError="True" ValidationExpression="assigned_in_code">
</asp:RegularExpressionValidator>

然后，我还加载了这个 jQuery sn-p（在 addons.js 中）：

$(document).ready(function () {
    $("form input[type='text'], form textarea").on("change", function () {
        $(this).val(function (i, value) {
            alert('trim addon this:=' + this.id + ' trimmed:=' + value.trim());
            return value.trim();
        });
    });
});

我希望，在文本输入值发生任何变化时，onchange 事件将触发，导致处理程序发出警报并调整输入值。然后验证器应该只验证修剪后的输入。

然而，这就是实际发生的情况：

我对输入进行了更改（通过使用键盘粘贴文本并导航离开）
如预期的那样，我会立即收到警报
我按 OK 关闭警报
输入的值被修剪并显示为这样
正则表达式通过显示红色文本“糟糕！”来抱怨不匹配。

但是，在我关闭该框后，输入的值应该被修剪，导致验证器验证修剪后的文本，这满足正则表达式。

验证器似乎验证了粘贴的文本，而不是修剪的文本。为什么？如何修剪，以使修剪后的变体得到验证？

注意：我知道https://forums.asp.net/t/1749522.aspx?Capturing+RegularExpressionValidator+event+client+side，但我不想更改现有代码，另外，这实际上应该适用于我代码中的所有验证器，而不仅仅是以后的正则表达式。

【问题讨论】：

标签： javascript jquery asp.net validation webforms

【解决方案1】：

问题不在于 ASP.NET 使用什么事件，而在于执行顺序。 ASP.NET 验证器在您的代码之前附加到 change 事件，这就是它首先被执行的原因。

一种可能的解决方案是从您的 javascript 事件中再次强制验证。

$(document).ready(function () {
    $("form input[type='text'], form textarea").on("change", function (event) {
        $(this).val(function (i, value) {
            alert('trim addon this:=' + this.id + ' trimmed:=' + value.trim());
            return value.trim();
        });
        ValidatorOnChange(event);
    });
});

另一种可能的解决方案，我不太喜欢它，因为它看起来很脆弱，将您的代码移动到表单上方，这样您就可以确定它将在执行列表中排在第一位.

<script src="jquery">
<script>
//your code
</script>
<form>
...

【讨论】：

实际上，我目前将代码移到了表单的末尾（以便我的控件可用），这样就可以了。我不再使用“准备好文档”了。
您的第一个解决方案适用于我的简化版本，但是实际页面有多个验证，并且两次处理更改会破坏事情。我将采用第二种解决方案，但采用第一条评论中提到的改编。
@kblock 和其他人：我在自己的答案中提供了我当前的实现（简化），以供将来参考。

【解决方案2】：

为了将来参考，我发布了我的（简化的）实现的解决方案。它基于 kblok 在accepted answer 中的第二个建议。

为了在 .NET WebForms 验证器之前注册一个事件，我在页面底部执行该代码，作为 form 元素中的最后一项（使用母版页和它自己的 js 文件中的脚本）：

这是我的代码（在 Public.Master 中）：

        ...
        <!-- container-main end -->

        <%--Javascript used for master and content--%>
        <script type="text/javascript" src='<%= ResolveUrl("~/js/jquery.min.js") %>'></script>
        <script type="text/javascript" src='<%= ResolveUrl("~/js/application-addons.js") %>'></script>
    </form>
</body>
</html>

这是我的代码（在 application-addons.js 中）：

// Trim all input fields. This helps with copy-pasted text accidentally having surrounding spaces.
// This intentionally does not affect inputs for passwords.
// Hint about execution time: The following code is intentionally not executed at document ready, but as soon as loaded.
// Doing so allows to register these input event handlers here BEFORE the regular ASP.NET validator controls 
// register their handlers. This way, the trimming gets applied before the validation.
// However, this implementation relies on the fact that all page cotrols, plus jQuery are already available at this stage.
$("form input[type='text'], form textarea").on("change", function () {
    $(this).val(function (i, value) {
        return value.trim();
    });
});

ASP.NET 现在将在我的事件处理程序添加后添加它的客户端验证事件处理程序代码。 现在，当输入字段中的文本发生变化时，文本会先被修剪，然后再进行验证。

插件：这是它在呈现页面中的外观（使用 Google Chrome 开发者工具：

【讨论】：