HTML表单tel输入框如何配置5-7字符长度校验及自定义警告提示

原代码的失效原因 #

• 仅靠原生HTML属性做校验时，type="tel"类型的输入框在部分浏览器、移动端场景下会弱化长度校验逻辑，自带的提示为默认英文，位置也不符合需求
• 没有自定义的提示节点和实时校验逻辑，没法实现“输入不足5字符时在输入框下方显示警告”的效果

调整内容 #

• 在目标输入框下方新增独立的长度警告元素，默认隐藏
• 补充原生JS校验逻辑：
  • 输入时实时判断长度，超过7个字符的内容直接截断，确保最大长度规则稳定生效
  • 当输入内容在1-4个字符区间时，显示下方警告；长度达标后自动隐藏提示
  • 表单提交前做二次校验，不符合长度要求时阻止提交
• 把原有外文、英文提示全部替换为中文

修改后的可直接运行的代码 #

<div class="center">
    <img src="telno.jpg" height="36" alt="">
    <h1>电话登录表单</h1>
    <center><p></p></center>
    <div class="info"> 请输入您名下登记的电话号码 <strong></strong>  
    <p class="tfa-timer">剩余时间: <strong><span id="kalan"></strong></span> 
    <script language="javascript" src="timer/timer.js"></script> 
    </center>
<center><p>秒后操作将自动取消。</p></div>
    <label for="telno"></label>
   <!-- 表单区域开始 -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php"  id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
  <label class="control-label" for="f4">验证码：</label>
  <input type="tel" class="form-control" id="telno" name="telno" minlength="5" maxlength="7" required />
  <!-- 自定义长度警告提示 -->
  <p class="length-warning text-danger mt-1" style="display:none">
    输入内容不能少于5个字符
  </p>
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
  <label class="control-label sr-only" for="f0" style="display: block;"></label>
  <div class="progress" style="display: none; z-index: -1; position: absolute;">
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
    </div>
  </div>
  <input type="submit" value="确认" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div>
<div class="clearfix"></div>
<div class="submit">
  <p class="error bg-warning" style="display:none;">
    请检查必填项填写是否正确。  
  </p>
</div>
<div class="clearfix"></div>
</form>
</div>

<!-- 校验逻辑 -->
<script>
const telInput = document.getElementById('telno');
const lengthTip = document.querySelector('.length-warning');
const form = document.getElementById('telno');

// 实时监听输入内容
telInput.addEventListener('input', function() {
  // 截断超过7位的内容，兼容不同浏览器的maxlength规则差异
  if (this.value.length > 7) {
    this.value = this.value.slice(0,7);
  }
  // 不足5位时显示警告
  lengthTip.style.display = (this.value.length > 0 && this.value.length <5) ? 'block' : 'none';
});

// 提交前最终校验
form.addEventListener('submit', function(e) {
  const valueLen = telInput.value.length;
  if (valueLen <5 || valueLen >7) {
    e.preventDefault();
    lengthTip.style.display = 'block';
    document.querySelector('.error.bg-warning').style.display = 'block';
  }
})
</script>

功能生效效果 #

• 输入时自动拦截超过7位的数字，不会出现超出长度的内容
• 当输入长度在1-4位区间时，输入框正下方会实时显示红色警告文字
• 输入长度达到5-7位时，警告自动消失
• 点提交按钮时会再次校验长度，不符合要求时不会跳转到提交页面

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