JavaScript onkeydown绑定邮箱验证函数无法更新校验结果问题

问题原因 #

代码存在三处核心错误，导致校验状态无法正常更新：

• 正则表达式写法错误：校验规则被包裹在字符串引号内，match()方法会将其识别为普通字符串做精确匹配，无法按照邮箱正则规则做格式校验，合法邮箱永远匹配失败
• 事件触发时机错误：绑定的onkeydown事件触发时，输入框的最新输入内容还未同步到value属性，校验逻辑拿到的始终是按键按下前的旧值，用户输入正确内容后校验读取的还是上一次的错误输入，提示自然无法更新
• 逻辑顺序问题：空值判断放在校验逻辑最后，会出现逻辑覆盖冲突

修复后代码 #

JavaScript 逻辑 #

function validation() {
    let form = document.getElementById('form')
    let email = document.getElementById('email').value
    let text = document.getElementById('text')
    // 去掉正则外层的引号，使用标准正则字面量
    let pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

    // 优先处理空输入场景
    if (email == '') {
        form.classList.remove('valid')
        form.classList.remove('invalid')
        text.innerHTML = ""
        return
    }

    if (email.match(pattern)) {
        form.classList.add('valid')
        form.classList.remove('invalid')
        text.innerHTML = "Valid"
        text.style.color = '#00ff00'
    } else {
        form.classList.remove('valid')
        form.classList.add('invalid')
        text.innerHTML = "Not valid"
        text.style.color = '#ff0000'
    }
}

HTML 结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <!-- 将onkeydown改为oninput，兼容粘贴、剪切等所有输入场景，确保能拿到最新值 -->
    <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" oninput="validation()">
    <span id="text"></span>
  </div>
</form>

调整说明 #

• 正则移除外层字符串引号，恢复正则匹配能力
• 事件从onkeydown替换为oninput，不管是键盘输入、粘贴、剪切内容，都会在输入框值更新后触发校验，不会出现读取旧值的问题
• 空值判断前置，匹配到空输入时直接重置状态后返回，避免后续校验逻辑覆盖空状态
• 修复后输入非法邮箱会显示红色 Not valid 提示，输入合法邮箱会立刻切换为绿色 Valid 提示，清空输入框时提示自动隐藏

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