javascript如何操作表单元素_如何验证用户输入？_技术教程

JavaScript获取修改表单值需用value/checked/selectedOptions等属性，禁用setAttribute('value')；提交验证须用event.preventDefault()并结合setCustomValidity()。

怎么用 JavaScript 获取和修改表单元素的值？

核心是通过 document.getElementById() 或 querySelector() 拿到元素，再读写 value、checked、selectedOptions 等属性。

常见误区：直接操作 innerHTML 或 textContent 对输入框无效；用 setAttribute('value', ...) 只改初始值，不更新当前控件状态。

input[type="text"]、textarea：读写 .value
input[type="checkbox"]、input[type="radio"]：读写 .checked
select 单选：读写 .value；多选：遍历 .selectedOptions 或用 .options 配合 .selected
禁用/只读状态统一用 .disabled = true 或 .readOnly = true

const emailInput = document.querySelector('#email');
console.log(emailInput.value); // 当前输入内容
emailInput.value = 'test@example.com'; // 立即生效

const agreeBox = document.querySelector('#agree');
agreeBox.checked = true; // 勾选复选框

表单提交时如何阻止默认行为并验证？

必须监听 submit 事件，并在回调中调用 event.preventDefault()，否则页面会立即刷新或跳转，验证逻辑根本来不及执行。

验证时机建议放在 submit 而非 blur 或 input：前者确保用户真要提交，后者容易干扰操作节奏，且无法覆盖粘贴、拖入等绕过方式。

验证失败就返回 false 并聚焦第一个错误项（element.focus()）
不要只靠前端验证——后端必须重复校验，JS 验证只为提升体验
避免用 alert() 提示，它阻塞 UI；改用 element.setCustomValidity() + reportValidity() 更符合原生语义

document.querySelector('form').addEventListener('submit', function (e) {
  e.preventDefault();
  
  const email = document.querySelector('#email').value;
  if (!/^\S+@\S+\.\S+$/.test(email)) {
    document.querySelector('#email').setCustomValidity('邮箱格式不正确');
    document.querySelector('#email').reportValidity();
    return;
  }
  
  this.submit(); // 验证通过才真正提交
});

怎么用 HTML5 原生验证 + JS 补充逻辑？

required、type="email"、pattern、minlength 等属性能触发浏览器内置提示，但它们只是基础层。JS 的作用是补足规则（比如“密码需包含大小写字母和数字”）、联动校验（比如“确认密码必须与密码一致”）、异步检查（比如用户名是否已被注册）。

注意：setCustomValidity('') 必须显式调用才能清除错误状态，否则后续验证会一直卡住；reportValidity() 不会触发 submit，只唤出提示框。

联动字段（如两次输入密码）：在第二个 input 的 input 事件里比对，实时更新 setCustomValidity()
异步校验（如用户名可用性）：用 fetch 请求后端，拿到结果再调用 setCustomValidity()，别忘了加 loading 状态防止重复提交
自定义错误文案：用 element.validationMessage 读取当前错误文本，可用于日志或统一提示栏

const pass1 = document.querySelector('#password');
const pass2 = document.querySelector('#confirm-password');

pass2.addEventListener('input', () => {
  if (pass2.value !== pass1.value) {
    pass2.setCustomValidity('两次输入的密码不一致');
  } else {
    pass2.setCustomValidity(''); // 关键：清空错误
  }
});