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：前者确保用户真要提交，后者容易干扰操作节奏，且无法覆盖粘贴、拖入等绕过方式。
立即学习“Java免费学习笔记（深入）”；
- 验证失败就返回
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(''); // 关键：清空错误
}
});
为什么正则验证邮箱总出错？
别用网上搜来的超长正则试图 100% 符合 RFC 5322——它既难维护，又会误拒合法邮箱（比如带 + 号的 Gmail 地址）。生产环境只需基础过滤：/^\S+@\S+\.\S+$/ 足够筛掉明显错误，真正可靠的验证是发确认邮件。
其他常见正则陷阱：
- 手机号：不同国家格式差异大，国内用
^1[3-9]\d{9}$就行，别硬套“所有运营商号段” - 密码强度：分开校验（长度 ≥8、含大写、含数字），而不是塞进一个正则，否则调试和提示都困难
- 中文姓名：别用
[\u4e00-\u9fa5]，它漏掉港澳台常用字和生僻字；更稳妥的是允许字母、空格、连接符，再加长度限制
正则只是第一道筛子，重点还是让用户能快速理解哪里错了、怎么改。
