JavaScript表单验证与操作技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript表单操作与验证技巧》，聊聊，我们一起来看看吧！

表单提交必须调用event.preventDefault()阻止默认行为，否则页面刷新导致JS验证失效；应监听submit事件而非click；验证失败不可手动form.submit()；可复用HTML5原生校验checkValidity()和reportValidity()；自定义规则宜绑定input或blur事件并防抖；setCustomValidity()设置错误信息；后端验证不可或缺。

表单提交时阻止默认行为必须调用 event.preventDefault()

不阻止默认行为，表单会立刻提交并刷新页面，所有 JS 验证逻辑都来不及执行。这是新手最常漏掉的一环。

• 监听 submit 事件，不是 click —— 后者无法捕获回车提交等场景
• event.preventDefault() 要放在验证逻辑之前，哪怕只是占位，避免误删
• 如果验证失败，不要手动调用 form.submit()，否则绕过 JS 验证

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault(); // 必须第一行
  if (validateForm()) {
    this.submit(); // 验证通过才原生提交
  }
});

用 checkValidity() + reportValidity() 复用浏览器原生校验

HTML5 表单属性（required、type="email"、minlength 等）自带基础校验能力，JS 可直接调用，无需重复写正则。

• input.checkValidity() 返回布尔值，不触发 UI 提示
• input.reportValidity() 返回布尔值，同时显示浏览器默认错误气泡
• 对整个表单调用 form.checkValidity() 会检查所有子控件，但 reportValidity() 不支持表单元素，需遍历触发

function validateForm() {
  const form = document.querySelector('form');
  const isValid = form.checkValidity();
  if (!isValid) {
    // 手动触发每个无效字段的提示
    form.querySelectorAll(':invalid').forEach(el => el.reportValidity());
  }
  return isValid;
}

自定义验证规则应绑定到 input 或 blur 事件，而非仅靠提交时检查

只在提交时验证，用户体验差；实时反馈能减少用户挫败感，但要注意性能和触发频率。

• 对 input 事件做防抖（如 300ms），避免每敲一个字都校验
• 密码确认类场景，更适合监听 blur（失焦）—— 用户输完再比对
• 避免在 input 中直接修改 value（如自动加空格），可能干扰用户输入节奏
• 自定义错误信息用 setCustomValidity()，清空时传空字符串：el.setCustomValidity('')

const pwdConfirm = document.getElementById('pwd-confirm');
pwdConfirm.addEventListener('blur', function () {
  const pwd = document.getElementById('password').value;
  this.setCustomValidity(this.value === pwd ? '' : '两次输入的密码不一致');
});

后端验证不可省，前端只是体验层

任何前端验证都能被绕过：禁用 JS、改 DOM、直接发请求。所以 required、pattern、甚至 JS 校验，都只是提升体验的“糖”，不是安全防线。

• 后端必须重新校验所有字段（包括格式、长度、业务逻辑如“用户名不能含敏感词”）
• 前后端正则尽量统一，避免前端提示“邮箱格式错误”，后端却说“邮箱已注册”—— 用户不知道哪步错了
• 服务端返回的错误字段名，最好和表单 name 属性一致，方便 JS 映射定位

复杂点在于：异步验证（如用户名是否可用）需要节流、取消重复请求、处理 loading 状态；这些容易被忽略，但直接影响表单可交互性。

本篇关于《JavaScript表单验证与操作技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！