jquery 验证正则表达式方法与 focusout 上的 jquery 掩码冲突

Posted 2023-05-08

【中文标题】jquery 验证正则表达式方法与 focusout 上的 jquery 掩码冲突

【英文标题】：jquery validate regex method conflicts with jquery mask on focusout

【发布时间】：2018-08-11 02:13:34

【问题描述】：

我有一个 asp.net mvc 模型，它在邮政编码和电话字段上使用 RegularExpressionAttribute，在输入上使用 jquery.maskedinput（来自 Josh Bush 的 v1.4.1）。没有必需的属性。

邮政编码正则表达式：^\d5(-\d4)?$ 邮政编码掩码：99999?-9999 电话正则表达式：^(?(\d3))?[\s-]?\d3[\s-]?\d4$ 电话掩码：[phone]

我正在使用如下所示的调用将掩码应用于输入：

$form.find('.zip-mask').mask('99999?-9999');

表单验证工作正常。但是，如果我从这些被屏蔽的正则表达式输入中选择一个并将该字段留空，则 jquery 验证会为输入提供指示无效的亮红色轮廓。我想防止这种情况发生。

我可以看到问题发生在哪里。我正在使用 jquery.validate 1.16.0 版。在 jquery.validate.unobtrusive.js 第 342 行这行代码添加了正则表达式验证方法：

$jQval.addMethod("regex", function (value, element, params) 

此方法会在 focusout 事件和表单验证时触发。当它触发 focusout 并且输入为空时，“value”参数包含 zip 或电话掩码（即“____?-____”或“(_)_-____”）。因为这个掩码显然不符合正则表达式，所以它返回 false，我在输入周围看到那个红条。

当它触发表单验证并且输入为空时，“value”参数是一个空字符串，并且该方法返回true，因此表单保存成功。

总结一下：表单验证有效，因为表单验证时“value”参数为空字符串，但focusout验证失败，因为在focusout时“value”参数为掩码。

当输入为空并且发生焦点输出正则表达式验证时，有什么方法可以阻止输入在“value”参数中传递掩码？

【问题讨论】：

您可以配置 $.validator 默认值 - 例如$.validator.setDefaults( onfocusout: false ); 但这些是全局应用的，而不是单个控件

谢谢@StephenMuecke！我可能是错的，但我认为可以将函数作为值而不是“false”传递，这将解决问题，如果我解决了，我会将其作为答案发布。

你的意思是覆盖验证器正则表达式函数吗？如果是这种情况，您也可以修改RegularExpressionAttribute 以具有OR 表达式，以便_____?-____ 也有效

@StephenMuecke 如果你喜欢添加答案，我会删除我的。

你的回答很好:)

【参考方案1】：

根据 Stephen Muecke 的建议，答案是简单地将 OR 条件添加到每个正则表达式的末尾，因此两个正则表达式现在看起来像这样：

邮政编码正则表达式：^\d5(-\d4)?$|^\d5-____|_____-____ 电话正则表达式：^(?(\d3))?[\s-]?\d3[\s-]?\d4$|(___) ___-____李>

邮政编码正则表达式需要两个 OR 条件，因为邮政编码可以是 5 位或 9 位数字。第一个 OR 处理 5 位 zip 和部分掩码，另一个处理空输入，即整个掩码。