掩码输入字段的长度验证

Question

我有以下遮罩字段:

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

屏蔽是这样做的:

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

我想做电话字段的长度验证。电话字段应该是正好10个字符长或屏蔽输入，它应该是14个字符长。我不想对提交按钮进行验证，但我想对phone字段进行长度验证onfocusout;或者有人离开现场的时候。我只是想在phone字段下面显示一条消息说"这个字段应该有10个字符长"如果有人输入少于10个字符。这种屏蔽不允许用户输入超过10个字符。此电话字段不是必填字段。

任何帮助都将是非常感激的。

Answer 1

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

$(".phone").inputmask({ "mask": "[phone]" }).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>