0

我有一个带有电话模式（巴西号码系统）的“tel”类型输入：

<input class="form-control" maxlength="15" pattern="[\(]?[0-9]{2}[\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}" type="tel" value="">

我还使用 jQuery Mask 插件在键入时自动添加我想要的字符，并在没有特殊字符的情况下检索值以存储在 db 上。这是我的 MaskBehavior 和选项（用于库）：

var PhoneMaskBehavior = function (val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
},
    phoneOptions = {
        selectOnFocus: true,
        onKeyPress: function(val, e, field, options) {
            field.mask(PhoneMaskBehavior.apply({}, arguments), options);
        }
};

问题是当我从数据库加载数字时添加默认值。它填写时没有特殊字符，并且表单不允许提交，因为该字段是必需的并且不符合格式。

这是我在输入中直接从 db 加载值时得到的结果：

样品1

这是我需要匹配模式的内容（以及当我手动输入数字时输入的内容，而不加载输入的value属性）：

在此处输入图像描述

有没有办法通过在数字之间添加特殊字符来自动加载一个值并使其与模式匹配，而不需要解析和处理字符串？

4

1 回答 1

1

为什么不在负载上使用遮罩？

var PhoneMaskBehavior = function(val) {
    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
  },
  phoneOptions = {
    selectOnFocus: true,
    onKeyPress: function(val, e, field, options) {
      field.mask(PhoneMaskBehavior.apply({}, arguments), options);
    }
  };

$(document).ready(function () {
  $('input[type=tel]').mask(PhoneMaskBehavior, phoneOptions)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>

<input value="51 3364 7979" type="tel" class="form-control" maxlength="15" pattern="[\(]?[0-9]{2}[\)]?[ ]?[0-9]{4,5}[-]?[0-9]{4}">

于 2019-08-01T22:06:09.963 回答