input[type="password"]不能用type="text"替代，因安全规范禁止明文显示、浏览器会警告不安全、移动端无密码键盘、密码管理器无法识别；须用autocomplete属性、formdata提交、原生校验反馈。
为什么 input[type="password"] 不能用 type="text" 替代显示密码
因为安全策略和浏览器行为强制要求：明文暴露密码字段会直接违反 OWASP 基础规范，且现代浏览器（Chrome/Firefox/Safari）会对 type="text" 的密码输入框触发「不安全表单」警告，甚至阻止自动填充。更关键的是，iOS 和 Android 软键盘在 type="password" 下默认启用密码专用键盘布局（带隐藏/显示切换按钮），而 type="text" 不会。
实操建议：
- 始终用
<input type="password" name="password">，不要加value属性预填（防 XSS 和历史泄露） - 如需「显示密码」功能，用 JS 切换
type属性值，但切换后必须重新聚焦 input，否则 Safari 会丢失光标位置 - 避免用 CSS
text-security: disc模拟密码效果——它不触发密码语义，无法被密码管理器识别
登录表单必须设置 autocomplete 属性才能被密码管理器识别
Chrome、1Password、Bitwarden 等工具只信任显式声明了 autocomplete 值的字段。不设或设错值（比如写成 autocomplete="off"）会导致自动填充失效，用户反复手动粘贴，反而增加弱密码使用概率。
实操建议：
- 用户名字段用
autocomplete="username"或autocomplete="email"（根据实际字段用途） - 密码字段必须用
autocomplete="current-password"（登录页）或autocomplete="new-password"（注册/改密页） - 禁用
autocomplete="off"—— 它已被现代浏览器忽略，部分还反向强制启用自动填充 - 确保
name和id属性与autocomplete语义一致，例如不要name="pwd"却配autocomplete="current-password"
提交前校验失败时，event.preventDefault() 必须配合 input 的 reportValidity()
原生表单校验（required、pattern、minlength）只在表单 submit 时触发 UI 提示。如果用 JS 拦截提交但没调用 reportValidity()，用户看不到任何错误反馈，只会发现「点不动」或「没反应」。
实操建议：
- 监听
form.addEventListener('submit', e => { ... })，而非按钮 click - 校验逻辑结束后，若失败，立即执行
e.target.reportValidity()（注意是表单元素，不是 event） - 不要手动清空
input.value后再调reportValidity()—— 这会让浏览器认为字段已通过校验 - 如需自定义错误文案，用
input.setCustomValidity('用户名不能为空')，再调reportValidity()
后端接收登录数据时，POST 请求体必须为 application/x-www-form-urlencoded，而非 JSON
HTML 表单默认提交就是 application/x-www-form-urlencoded 编码格式。如果前端强行用 fetch + JSON.stringify 发送，而后端只解析表单编码（如 Express 的 body-parser.urlencoded()），就会收不到 req.body.username，全部变成 undefined。
实操建议：
- 保持原生表单提交（
<form method="POST" action="/login"></form>），最简最稳 - 如需 AJAX 提交，必须用
FormData构造请求体：const fd = new FormData(formEl); fetch('/login', { method: 'POST', body: fd }) - 避免用
JSON.stringify({ username, password })—— 它发的是 JSON，不是表单数据，后端需额外配置 JSON 解析中间件 - Node.js + Express 场景下，确认已启用
app.use(express.urlencoded({ extended: true }))，而非只启用了express.json()
密码字段的语义、自动填充行为、校验反馈时机、传输编码格式——这四点任一出错，都会让登录流程在用户侧卡住，且问题难以定位。尤其 autocomplete 和 FormData 的使用，常被当成“可选优化”，实际却是能否正常工作的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
