jquery.validate 与屏蔽输入冲突答案

【问题标题】：jquery.validate conflicts with masked inputjquery.validate 与屏蔽输入冲突
【发布时间】：2012-09-14 14:32:26
【问题描述】：

我有一个使用http://digitalbush.com/projects/masked-input-plugin/ 屏蔽并使用http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 验证的电话号码。

代码位于下方，“几乎”工作示例位于http://jsfiddle.net/dnv38/。

请注意，电话号码不是必需的，但两个插件冲突导致需要电话号码。不久前，我以为我找到了每个 jquery.maskedinput-1.3.js conflicts with jquery.validate 1.9.0 的答案，但事实证明它不正确。

如何屏蔽输入并对其进行验证，但不使其成为必需？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Validate</title> 
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js" type="text/javascript"></script>
<script src="http://snort-rule-manager.googlecode.com/svn-history/r2/trunk/assets/9982dce2/jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {

    $("#phone").mask("(999) 999-9999");

    var validator=$("#form").validate({
        rules: {phone:"phoneUS"},
        submitHandler: function(form) {
            alert('submitHandler');
        }
    });

});
</script>
</head>

<body>

<form id="form" method="post">
<input type="text" name="phone" id="phone" value="" />
<input type="submit" name="submit" value="submit" />
</form>

</body> 
</html>

【问题讨论】：

验证已经在掩码插件中进行。那么，为什么还要麻烦再次验证它呢？不确定我是否理解正确，但如果我正确地看到了情况，这里会发生 2 个验证：掩码检查是否与正确的电话号码相匹配，如果不是，则该字段被空白。验证插件再次检查它是否是正确的数字。如果该字段未填写，则触发任何提交处理程序。
(123) 456-7890 不是有效的电话号码，因为它以 1 开头。屏蔽输入仅检查是否输入了正确类型的字符。此外，屏蔽输入不会像 jquery.validate 那样给用户反馈，我希望与所有用户交互保持一致。
看到这个stackoverflow.com/questions/4399086/… ?
是的，那是我第一次使用的那个，然后我几个月前在stackoverflow.com/questions/12115588/… 的帖子中指出了问题。我似乎无法重现我的问题，但会继续尝试

标签： jquery jquery-validate maskedinput

【解决方案1】：

我可以通过使用闭包修改验证插件的 onfocusout 方法来解决此问题，但这样做似乎是错误的......

    onfocusout: function (element)
    {
        if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element)))
        {
            var currentObj = this;
            var currentElement = element;
            var delay = function () { currentObj.element(currentElement); };
            setTimeout(delay, 0);
        }
    },

【讨论】：