JavaScript如何通过if else判断输入框pattern校验结果

直接基于现有逻辑补全正则匹配判断即可，核心是抽离统一校验函数，同时绑定实时输入、表单提交两个触发时机，通过if/else分支控制对应提示的显隐。

实现逻辑说明 #

• 直接读取input标签上自带的pattern属性生成正则实例，无需在JS里硬编码重复规则，后续调整校验规则仅需修改HTML属性
• 所有校验逻辑收敛到同一个函数，实时输入、表单提交时共用，避免冗余代码
• 校验分支依次判断空值、正则匹配结果，分别控制有效/无效提示div的显示状态，校验不通过时拦截表单提交

完整代码示例 #

JavaScript逻辑 #

// 提前缓存DOM元素，避免每次校验重复查询
const smsInput = document.getElementById('smsno');
const smsForm = document.getElementById('smsForm');
const validTip = document.getElementById('validTip');
const invalidTip = document.getElementById('invalidTip');

// 统一校验函数
function validateSmsInput() {
  const inputValue = smsInput.value.trim();
  // 拼接^$做全字符串匹配，对齐原生表单pattern的校验逻辑
  const patternReg = new RegExp(`^${smsInput.pattern}$`);

  // 先重置所有提示的显示状态
  validTip.style.display = 'none';
  invalidTip.style.display = 'none';

  // 条件判断分支
  if (!inputValue) {
    invalidTip.innerText = '验证码不能为空';
    invalidTip.style.display = 'block';
    return false;
  } else if (!patternReg.test(inputValue)) {
    invalidTip.innerText = '验证码格式不符合要求';
    invalidTip.style.display = 'block';
    return false;
  } else {
    validTip.style.display = 'block';
    return true;
  }
}

// 绑定实时输入触发
smsInput.addEventListener('input', validateSmsInput);

// 绑定表单提交触发
smsForm.addEventListener('submit', function(e) {
  const validateResult = validateSmsInput();
  if (!validateResult) {
    // 校验不通过时阻止默认提交行为
    e.preventDefault();
  }
});

HTML结构参考 #

<form id="smsForm">
  <div class="form-item">
    <label for="smsno">短信验证码</label>
    <!-- pattern属性直接配置校验规则，示例为6位纯数字规则 -->
    <input 
      type="text" 
      id="smsno" 
      name="smsno" 
      pattern="\d{6}"
      placeholder="请输入收到的6位验证码"
    >
  </div>
  <!-- 提示元素默认隐藏 -->
  <div id="validTip" style="display: none; color: #2ecc71; margin-top: 8px;">验证码格式正确</div>
  <div id="invalidTip" style="display: none; color: #e74c3c; margin-top: 8px;"></div>
  <button type="submit" style="margin-top: 16px;">提交表单</button>
</form>

注意事项 #

• 生成正则时手动拼接^和$是为了避免部分匹配导致的校验漏判，比如7位数字如果不加全匹配符，会被误判为符合6位数字的规则
• 如果需要调整校验规则，直接修改input标签上的pattern属性值即可，无需改动JS逻辑，比如校验11位手机号可将pattern改为1[3-9]\d{9}
• 如果需要自定义错误提示文案，可以在对应判断分支里修改invalidTip的文本内容

内容的提问来源于stack exchange，提问作者V.K