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

时间:2018-03-02 19:47:28

标签: javascript jquery asp.net-mvc data-annotations unobtrusive-validation

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

  • 邮政编码正则表达式:^ \ d {5}( - \ d {4})?$
  • 邮政编码面具:99999?-9999
  • 手机正则表达式:^(?(\ d {3}))?[\ n - ]?\ d {3} [\ s - ]?\ d {4} $
  • 电话面具:(999)999-9999

我正在使用看起来像这样的调用对输入应用掩码:

$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事件和表单验证时触发。当它在焦点上触发并且输入为空时,“value”参数包含zip或电话掩码(即“_____?-____”或“( _)_ -____”)。由于这个掩码显然不符合正则表达式,它返回false,我在输入周围得到了红色条。

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

总结:表单验证有效,因为当表单验证“value”参数是空字符串时,但焦点验证失败,因为在焦点上“value”参数是掩码。

当输入为空并且聚焦输出正则表达式验证发生时,有没有办法阻止输入在“value”参数中传递掩码?

1 个答案:

答案 0 :(得分:1)

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

  • 邮政编码正则表达式:^ \ d {5}( - \ d {4})?$ | ^ \ d {5} -____ | _____-____
  • 手机正则表达式:^(?(\ d {3}))?[\ n - ]?\ d {3} [\ s - ]?\ d {4} $ |(___)___-____

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