Asp.Net Validation 控件仅与 MS Edge 中的 javascript 函数冲突答案

【问题标题】：Asp.Net Validation control conflicts with javascript function in MS Edge onlyAsp.Net Validation 控件仅与 MS Edge 中的 javascript 函数冲突
【发布时间】：2018-11-08 12:41:44
【问题描述】：

我有一个在表单中使用的用户控件。该控件包含两个标准的 Asp.Net 验证控件。

这是代码 sn-p - 如您所见，有一个必填字段验证器和一个正则表达式验证器：

<asp:Panel ID="pnlInputControl" runat="server" CssClass="input-control">
    <div class="input-wrapper input-text half-width">
        <asp:TextBox ID="tbInput" runat="server"
            CssClass="no-space"
            MaxLength="11"
            type="tel">
        </asp:TextBox>
    </div>
    <asp:RequiredFieldValidator ID="rfvInput" runat="server"
        ControlToValidate="tbInput"
        Display="Dynamic"
        SetFocusOnError="True"
        CssClass="validator">
    </asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="revInput" runat="server"
        ControlToValidate="tbInput"
        Display="Dynamic"
        SetFocusOnError="True"
        CssClass="validator">
    </asp:RegularExpressionValidator>
</asp:Panel>

我验证了一个电话号码 - 文本框本身也将字符数限制为 11，这是英国号码的最大大小。

这是一个示例正则表达式：

^0[12]\d{8,9}$ - 家庭电话号码

我还尝试屏蔽输入，使用 javascript 函数删除空格 - 由文本框上标记为“no-space”的类触发。

$("body").on("input", "input.no-space", removeSpace);

function removeSpace() {
        $(this).val(function (_, v) {
            return v.replace(/\s+/g, '');
        });
    }

这在除 MS Edge 之外的所有浏览器上都能和谐运行。

在 Edge 上，它会破坏 Asp.Net 验证 - 验证器不会启动 - 基本上它会锁定整个表单，因为它是必填字段。

问题是我没有收到任何错误，所以除了完全删除类并添加提示让用户知道不要输入空格之外，我不确定我还能做什么。

有什么想法 - 解决问题还是更好的解决方法？

【问题讨论】：

标签： javascript asp.net asp.net-validators

【解决方案1】：

当焦点从该特定输入字段更改时，我将允许更多字符并使用正则表达式来清理该字段。你如何用正则表达式清理它取决于你对用户的期望。如果您确信用户只会输入英国号码 - 您可以替换所有非数字字符。我不在 JQ 工作，但这是 vanilla JS

    <input id="phone">

    document.getElementById("phone").addEventListener("blur", phoneCleanup);
    function phoneCleanup() {
        var phone = this.value;
        this.value = phone.replace(/\D+/g, '');         
    }

【讨论】：

【解决方案2】：

您可以简单地禁止在input type=tel 文本框中按下“空格”键。

$('input[type=tel]').keydown(function (e) {
    return (e.keyCode !== 32);
});

【讨论】：