JavaScript 中怎么监听表单中某个字段的失焦校验-js教程-PHP中文网

JavaScript 中监听表单字段 blur 事件校验，需 DOM 加载后绑定事件，清除旧状态，执行非空、邮箱等校验并更新 UI；可封装复用函数，结合 HTML5 原生验证，但须在 submit 时再次全量校验。

javascript 中怎么监听表单中某个字段的失焦校验

在 JavaScript 中监听表单字段的失焦（blur）事件并进行校验，核心是给目标或其他表单元素绑定 blur 事件，然后在回调中执行校验逻辑（比如检查是否为空、格式是否合法等），再根据结果更新 UI（如显示错误提示、添加/移除 class）。

绑定 blur 事件并校验值

最直接的方式是用 addEventListener 监听 blur，并在回调里读取 value 进行判断：

确保 DOM 加载完成后再绑定，避免元素未就绪
校验前可先清除旧的错误状态（如移除 error class、隐藏上一条提示）
常见校验：非空、邮箱格式、手机号长度、密码确认一致性等

示例：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const emailInput = document.querySelector('#email');
emailInput.addEventListener('blur', function() {
  const value = this.value.trim();
  const isValid = value && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  
  // 清除旧状态
  this.classList.remove('error', 'success');
  const errorEl = this.nextElementSibling;
  if (errorEl && errorEl.classList.contains('error-message')) {
    errorEl.textContent = '';
  }

  // 更新状态
  if (!isValid) {
    this.classList.add('error');
    if (errorEl) errorEl.textContent = '请输入有效的邮箱地址';
  } else {
    this.classList.add('success');
  }
});