jQuery验证和屏蔽输入之间的冲突
我有一个表单，它使用jQuery验证和蒙面输入作为电话号码和美国邮政编码字段。
例如，对于美国邮政编码，蒙面输入只允许输入数字，并强制格式为"99999“或"99999-9999”(其中9可以是任意数字)。验证规则也需要相同的条件。但是在某些情况下，当一个字段实际上应该是有效的时候，它会将它标记为无效。
代码规范
jQuery验证在邮政编码字段上使用的正则表达式是^\d{5}$|^\d{5}\-\d{4}$。
我使用蒙面输入的掩码是.mask('99999?-9999')
复制步骤
当我这样做时，它们之间会产生冲突：
- 填写无效的邮政编码(例如，三位数字)
- 远离战场的标签。屏蔽输入擦除输入(预期行为)，jQuery验证将其标记为无效，因为它是空白(也是预期的)。
- 返回zip字段并填写有效的5位数 zip。
- 远离战场的标签。它仍然被标记为无效。这是意外的。
如果我填了一个9位数的拉链，这个问题就不会发生，而不是.
假设
我认为这个错误是因为在5位压缩的情况下，屏蔽输入临时插入了"-____“，以显示用户可以选择输入一个破折号和另外四个数字。这是删除在模糊，但在它被删除之前，该字段的验证和失败，因为下划线是不允许的。
这个假设得到了这样一个事实的支持:如果表单随后被重新验证，zip字段就会通过。我做了两种方法：
- 通过提交表单；当单击submit按钮、zip字段通过和表单提交时，所有字段都将被重新验证。
- 通过设置一个重新验证特定字段的
blur事件。例如： $(#zipcode).blur(函数(){.blur })；
-这可以作为一个黑客解决方案，但不是很令人满意，因为1)默认设置已经在模糊上重新验证，因此这是重复的，2)它需要额外的代码，除了正常的验证规则。
还有其他人遇到过这个问题吗？，您有比设置一个额外的模糊事件侦听器更优雅的解决方案吗？
更新:应用hacky解决方案
即使应用上面的hacky解决方案也不像我想的那么好。例如，这不起作用：
$appDiv.delegate('input,select,textarea','blur',function(){
$(this).closest('form').validate().element($(this));
});...nor这样做：
$('input,select,textarea').live('blur',function(){
$(this).closest('form').validate().element($(this));
});...but这样做：
$('input,select,textarea').each(function(){
$(this).blur(function(){
$(this).closest('form').validate().element($(this));
});
});由于这些元素是由AJAX加载的，所以每次加载表单部分时都必须运行.each版本。
回答 7
Stack Overflow用户
发布于 2011-02-02 00:27:56
我其实是在寻找这个问题的答案。最后想出了一个更可靠的解决办法。
由于我为zipcode定义了自己的验证器方法，所以我修改了它，以便在从值中删除占位符之后，如果for代码的长度为6，它将删除连字符。
看起来是这样的：
$.validator.addMethod("zipcode", function(postalcode, element) {
//removes placeholder from string
postalcode = postalcode.split("_").join("");
//Checks the length of the zipcode now that placeholder characters are removed.
if (postalcode.length === 6) {
//Removes hyphen
postalcode = postalcode.replace("-", "");
}
//validates postalcode.
return this.optional(element) || postalcode.match(/^\d{5}$|^\d{5}\-\d{4}$/);
}, "Please specify a valid zip code");因此，我正在验证的邮政编码将由输入插件添加占位符，如果输入的邮政编码只有5个数字(包括连字符)，则删除连字符。因此，它将正确地验证它。
Stack Overflow用户
发布于 2012-03-14 09:14:38
我试着遵循解决方案，它就像一种魅力。
$("[data-input-type=phone]", "body")
.mask("(999) 999 99 99")
.bind("blur", function () {
// force revalidate on blur.
var frm = $(this).parents("form");
// if form has a validator
if ($.data( frm[0], 'validator' )) {
var validator = $(this).parents("form").validate();
validator.settings.onfocusout.apply(validator, [this]);
}
});触发问题的是事件排序。当一个元素被蒙面时，它是由blur上的maskedinput插件验证的，但是相同的元素是由focusout事件上的验证器插件(它是非ie浏览器上的模糊包装器)验证的，它是在maskedinput的模糊之前调用的。
在这种情况下，当验证器检查值时，输入元素具有值"(___) ___ __ __"。当代码到达maskedinput的模糊事件时，插件测试并清除该值，因为它不是有效的输入。
对于每个验证案例，验证结果可能不同。例如，required规则将成功传递，因为元素有一个值。即使输入为空，非必需的number字段也会失败，因为像"999"这样的掩码可能会被测试为12_。
上面的代码测试蒙面输入的形式是否附加了验证，并召回焦点事件处理程序。由于我们的处理程序是作为最新的附加，希望它最终会被调用。
警告，代码只是复制验证插件的行为。它可能会工作十年，但如果验证插件决定做与现在不同的事情，它可能会失败。
由衷地
Stack Overflow用户
发布于 2012-12-05 21:10:08
只需连接到掩码()函数，并附加一些附加逻辑，在默认掩码的模糊逻辑之后触发自己的模糊逻辑：
//Store the original mask function
var origMaskFn = $.fn.mask;
$.fn.mask = function (mask, settings) {
//Call the original function applying the default settings
origMaskFn.apply(this, [mask, settings]);
//Manually validate our element on blur to prevent unobtrusive messages
//from showing before the mask is properly scrubbed
$(this).bind('blur', function () {
var $form = $(this).parents('form');
if (!$form.exists())
return;
var validator = $form.validate().element($(this));
});
}此外，您可能会注意到‘the ()’函数。这是我在jQuery选择器中经常用到的东西：
//Function to detect if a jQuery elements exists. i.e.:
// var $element = $(selector);
// if($element.exists()) do something...
$.fn.exists = function () {
return this.length !== 0;
}https://stackoverflow.com/questions/4399086
复制相似问题
腾讯云开发者
