Question

我正在使用jQuery Maskedinput plugin构建一个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>

使用this answer的指导，我以这种方式编写了掩码和“unmask”，并将它们添加到_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。当我尝试提交时，我得到了验证错误客户端：

我希望上面的“取消屏蔽”，在提交表单时，从类.phone的元素中删除所有破折号，可以防止出现此问题。事实上，在值进入数据库之前，需要删除破折号，因此它只是纯数字。

我做错了什么？感谢。

Answer 1

解决方案是在this post的帮助下创建自定义验证器。

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的文档中调用上述内容。另外，我们将以下内容投入到同一文档中：

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

请注意，在depends功能中，我们会清除任何短划线的电话号码。此外，上述代码必须在以下代码之前，否则该字段将无法获取掩码。

掩码方法在同一个文件中更新：

$('.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课程，我们很高兴。

jQuery蒙板输入触发验证

1 个答案: