jQuery掩盖的输入触发验证

Question

我使用电话号码的jQuery Maskedinput插件构建一个ASP.NET MVC 5应用程序。 但是，该插件会导致长度验证器触发。

这是C＃属性定义：

[StringLength(10)]
[DataType(DataType.PhoneNumber)]
public string Phone_Nbr { get; set; }

这是视图中的表单字段：

<div class="form-group-sm clearfix">
    @Html.LabelFor(m => m.CustomerVm.Phone_Nbr, 
        htmlAttributes: new { @class = "control-label col-xs-5 col-md-5" })
    <div class="col-xs-2 col-md-2">
        @Html.EditorFor(m => m.CustomerVm.Phone_Nbr, 
            new { htmlAttributes = new { @class = "form-control phone" } })
        @Html.ValidationMessageFor(m => m.CustomerVm.Phone_Nbr, "", 
            new { @class = "text-danger" })
    </div>
</div>

这是上面的Razor代码产生的HTML：

<div class="form-group-sm clearfix">
    <label class="control-label col-xs-5 col-md-5" for="CustomerVm_Phone_Nbr">Phone #</label>
    <div class="col-xs-2 col-md-2">
        <input class="form-control phone text-box single-line input-validation-error" 
            data-val="true" data-val-length="The field Phone # must be a string with a maximum length of 10." 
            data-val-length-max="10" id="CustomerVm_Phone_Nbr" name="CustomerVm.Phone_Nbr" 
            type="tel" value="9103440700" aria-describedby="CustomerVm_Phone_Nbr-error" 
            aria-invalid="true">
        <span class="text-danger field-validation-error" data-valmsg-for="CustomerVm.Phone_Nbr" 
            data-valmsg-replace="true">
            <span id="CustomerVm_Phone_Nbr-error" class="">The field Phone # must be a string with a maximum length of 10.</span>
        </span>
    </div>
</div>

根据此答案的指导，我以这种方式编写了遮罩和“取消遮罩”，并将它们添加到_Layout.cshtml的文档就绪功能中，因此所有视图都可以访问它们：

$('.phone')
    .mask('999-999-9999')
    .on('blur', function () {
        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]);
        }
    });

// Unmask the phone number on-submit of the form.
$('form').submit(function () {
    $('.phone').each(function (index, element) {
        var value = $(element).val().replace(/-/g, '');
        $(element).val(value);
    });
});

具有.phone类的任何表单元素都将应用掩码。 当我们清除电话号码的必填字段时， blur处理程序旨在防止不必要的验证。 请注意，此字段不是必填字段，但最大长度为10。 当我尝试提交时，出现此验证错误客户端：

我希望上面的“ unmask”（提交表单时，从带有.phone类的元素中删除所有破折号）可以防止此问题。 实际上，在将值输入数据库之前，需要删除破折号，因此它只是纯数字。

我究竟做错了什么？ 谢谢。

Answer 1

该解决方案是创建一个自定义的验证，与一些帮助这个职位 。

optionalPhoneValidator: function() {
    $.validator.addMethod('optionalPhone', function(value, element) {
        return this.optional(element) || pims.utilities.isNormalInteger(element.value);
    }, 'Please enter a string with a maximum length of 10.');
}

我们从_Layout.cshtml准备好的文档中调用以上_Layout.cshtml 。 另外，我们将以下内容放入同一文档中：

$('.phone-optional').validate({ onkeyup: false });
$('.phone-optional').each(function () {
    $(this).rules('add', {
        optionalPhone: {
            depends: function () {
                $(this).val($(this).val().replace(/-/g, ''));
                return true;
            }
        }
    });
});

请注意，在depends函数中，我们会清除所有破折号的电话号码。 另外，上面的代码必须在以下代码之前出现，否则该字段将不会得到掩码。

mask方法已在同一文件中更新：

$('.phone, .phone-optional')
    .mask('999-999-9999')
    .on('blur', function () {
        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]);
        }
    });

然后，我们仅将.phone-optional类放在电话号码字段中，我们就很好了。