如何为jquery.inputmask手机号字段添加Chrome兼容的长度验证？

我网页上有多个手机号输入字段，使用jquery.inputmask库设置了掩码格式，原有代码如下：

JavaScript代码 #

$("#HomePhoneInput").inputmask({
  "mask": "(999) 999-9999"
});
$("#WorkPhoneInput").inputmask({
  "mask": "(999) 999-9999"
});
$("#CellPhoneInput").inputmask({
  "mask": "(999) 999-9999"
});

HTML代码 #

<input type="text" asp-for="HomePhone" id="HomePhoneInput" placeholder="(___) ___-____" />
<input type="text" asp-for="CellPhone" id="CellPhoneInput" placeholder="(___) ___-____" />
<input type="text" asp-for="WorkPhone" id="WorkPhoneInput" placeholder="(___) ___-____" />

<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>

我希望对手机号字段添加长度限制：当用户输入不足10个字符并离开该字段时，在字段下方显示错误提示“Phone field needs to be 10 character long.”。我尝试在输入框中添加minlength="10"、maxlength="10"和data-msg属性，但该方法在Chrome浏览器中不生效。我需要实现的效果为：输入框下方显示红色的错误提示文字。请问如何解决这个问题，实现符合需求的长度验证功能？

解决方案 #

1. 调整HTML结构，添加错误提示容器 #

给每个手机号输入框添加父容器，并在输入框后新增一个用于显示错误提示的元素：

<div class="phone-field-group">
  <input type="text" asp-for="HomePhone" id="HomePhoneInput" placeholder="(___) ___-____" />
  <span class="phone-error-msg"></span>
</div>
<div class="phone-field-group">
  <input type="text" asp-for="CellPhone" id="CellPhoneInput" placeholder="(___) ___-____" />
  <span class="phone-error-msg"></span>
</div>
<div class="phone-field-group">
  <input type="text" asp-for="WorkPhone" id="WorkPhoneInput" placeholder="(___) ___-____" />
  <span class="phone-error-msg"></span>
</div>

<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>

2. 编写错误提示样式 #

添加CSS样式，让错误提示显示在输入框下方，颜色设为红色：

.phone-error-msg {
  display: block;
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}

3. 实现验证逻辑 #

利用jquery.inputmask提供的unmaskedvalue()方法获取用户输入的纯数字内容，结合blur事件触发验证：

// 批量初始化所有手机号输入框的掩码
$("[id$='PhoneInput']").inputmask({
  "mask": "(999) 999-9999"
});

// 绑定失去焦点事件进行长度验证
$("[id$='PhoneInput']").on('blur', function() {
  // 获取去除掩码后的纯数字长度
  const pureNumberLength = $(this).inputmask('unmaskedvalue').length;
  const errorElement = $(this).siblings('.phone-error-msg');
  
  if (pureNumberLength < 10) {
    errorElement.text("Phone field needs to be 10 character long.");
  } else {
    errorElement.text('');
  }
});

4. 可选优化：输入时清除错误提示 #

如果需要在用户开始输入时自动清除错误提示，可以添加input事件监听：

$("[id$='PhoneInput']").on('input', function() {
  $(this).siblings('.phone-error-msg').text('');
});

原因说明 #

原生minlength和maxlength属性不生效，是因为inputmask会给输入框添加格式化字符（括号、空格、横杠），输入框的实际内容长度远大于10，导致原生验证逻辑不触发。而unmaskedvalue()方法可以直接获取用户输入的纯数字内容，能准确判断是否满足10位的要求。

内容的提问来源于stack exchange，提问作者Anjali