Bootstrap表单自定义正则验证失效，请求排查问题原因

你的表单验证失效主要是由以下几个问题导致的：

1. HTML元素重复ID #

姓名字段的<input>标签同时设置了id="nameinp"和id="OName"，HTML规范要求每个元素只能有唯一ID，重复ID会导致DOM选择器行为异常，甚至无法正确获取目标元素。

2. 验证逻辑时机错误 #

当前代码在页面加载时就获取了输入框的初始值（空字符串）并执行正则测试，之后isPasswordValid的值就固定了——不管用户后续输入什么，验证结果都是页面加载时的状态，完全没有对实时输入内容做检查。

3. 变量命名混淆（非致命但需修正） #

变量isPasswordValid实际是用来验证姓名的，命名不符合语义，容易造成代码理解混乱，建议改为isNameValid。

修正后的代码 #

HTML部分（修复重复ID）

<form id="Oform" action="" class="form-control needs-validation" novalidate>
  <label for="nameinp">name</label>
  <!-- 移除重复的id="OName"，保持ID唯一 -->
  <input required id="nameinp" type="text" name="nameinp" class="form-control">
  <div class="input-group form-control">
    <label class="col-sm-12" for="IPrange"> family</label>
    <input required class="form-control" type="text" name="" id="IPrange">
  </div>
  <button class="btn btn-success" id="submitbtn" type="submit">submit </button>
</form>

JavaScript部分（调整验证时机+添加自定义错误提示）

(() => {
  'use strict'
  const forms = document.querySelectorAll('.needs-validation');
  const nameinp = document.getElementById('nameinp');
  const namePattern = /^[A-Za-z]+$/;

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      // 提交时实时获取输入值并执行正则验证
      const isNameValid = namePattern.test(nameinp.value.trim());

      // 同时检查Bootstrap默认验证和自定义姓名验证
      if (!form.checkValidity() || !isNameValid) {
        event.preventDefault();
        event.stopPropagation();
      }

      // 设置自定义错误提示，配合Bootstrap的验证样式
      if (!isNameValid) {
        nameinp.setCustomValidity('姓名只能包含英文字母');
      } else {
        nameinp.setCustomValidity('');
      }

      form.classList.add('was-validated');
    }, false);
  });
})();

关键修正说明 #

• 把正则验证逻辑移到表单提交事件内部，确保每次提交都检查用户的实时输入。
• 使用setCustomValidity方法设置自定义错误信息，让Bootstrap的验证样式正常触发，用户能直观看到错误提示。
• 移除重复ID，保证DOM元素能被正确选中。

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