Question

为电话号码输入自定义常规文本框有什么好方法？例如，用户可以插入其中一个字符串

+420123456789
+420 123 456 789
123456789
123 456 789

+420是一个代码，可以有不同的代码，如+891

我想把它全部显示为

+420 123 456 789

或

123 456 879

我的模型有此属性

public string Phone { get; set; }

视图是

<div class="form-group">
            <div class="validation-message">@Html.ValidationMessageFor(m => m.FormVM.Phone)</div>
            @Html.LabelFor(m => m.FormVM.Phone, new { @class = "control-label" })
            @Html.TextBoxFor(m => m.FormVM.Phone, new { @class = "form-control" })
        </div>

我可以使用一些DataAnnotation attribut，或者我必须使用jQuery，如果是，使用哪个插件？

变体1 - jQuery掩码插件

// Phone Mask
$(document).ready(function () {
    var options = {
        onKeyPress: function (cep, e, field, options) {
            var masks = ['+000 000 000 000', '000 000 0000'];
            mask = (cep.replace(/\s/g, '').length > 9) ? masks[0] : masks[1];
            $('#@Html.IdFor(m => m.Phone)').mask(mask, options);
        }
    };

    $('#@Html.IdFor(m => m.Phone)').mask('000000000000000', options);
});

这是我要为用户启用的两个掩码

var masks = ['+000 000 000 000', '000 000 0000'];

这是页面开始时的默认掩码，如果文本框为空，则启用粘贴两种格式

$('#@Html.IdFor(m => m.Phone)').mask('000000000000000', options);

这有助于我删除空格并更好地计算电话号码

cep.replace(/\s/g, '').

但另外一个问题是，用户如何传递“+”符号？这个'+'符号是由掩码脚本添加的，但是允许用户只传递数字..我尝试了一些翻译选项，但它不起作用，有什么想法吗？

如何格式化模型文本框中的电话号码

0 个答案: