jquery 掩码输入字段的长度验证

rta7y2nd 于 2023-04-20 发布在 jQuery

关注(0)|答案(1)|浏览(128)

我有以下掩码字段：

<input id="phone1" placeholder="(___) ___-____"/>

masking是这样做的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
        <script>
        $("#phone1").inputmask({ "mask": "(999) 999-9999" });
        </script>

我想做电话字段的长度验证。电话字段的长度应该正好是10个字符，或者使用掩码输入，它应该是14个字符。我不想在提交按钮上做验证，但我想做电话字段的长度验证“onfocusout”或当有人制表符出字段.我只是想显示一个消息下面的电话领域说“如果某人输入的字符少于10个字符，则此字段的长度应为10个字符。2此屏蔽不允许用户输入超过10个字符。3此电话字段不是必填字段。
任何帮助都将不胜感激。

jquery

来源：https://stackoverflow.com/questions/76001435/length-validation-of-masked-input-field

1条答案

按热度按时间

n7taea2i1#

只需在.keyup事件上定义验证，因此如果有任何验证错误，它将在用户输入时显示。使用.replace(/\D/g,'')删除非数字字符串。

$(".phone").inputmask({ "mask": "(999) 999-9999" }).keyup((e) => {
  if(e.target) {
    let value = e.target.value.replace(/\D/g,'');
    if (value.length < 10) {
      $(e.target).next(".error").html('this field should be 10 characters long');
    } else {
      $(e.target).next(".error").html('');
    }
  }
});

.error {
  color: red;
}

<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.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>

<input id="phone1" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>
<input id="phone2" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>
<input id="phone3" class="phone" placeholder="(___) ___-____"/>
<div class="error"></div>

赞(0）回复(0）举报 2023-04-20

我来回答

jquery 掩码输入字段的长度验证

1条答案

相关问题

热门标签

最新问答