input事件比blur更合适实时校验，因其在值变化时立即触发，需结合event.iscomposing过滤中文输入干扰，并通过节流、setcustomvalidity、动态样式等实现高效精准反馈。
input事件监听比blur更合适实时校验
实时校验的核心是“用户每敲一个键就检查”，input事件比blur或change更及时——它在输入值变化时立即触发，包括删除、粘贴、中文输入法上屏后。但要注意：中文输入过程中（拼音阶段）input也会触发，可能造成误判，需结合event.isComposing过滤。
实操建议：
- 对
<input>或<textarea></textarea>绑定input事件，避免只用blur（那只是失焦校验，不算“实时”） - 中文输入场景下，加判断：
if (event.isComposing || event.target.composing) return; - 不要在每次
input里直接发请求或调用复杂正则——先节流（如setTimeout延时300ms），等用户停顿再校验
用setCustomValidity控制原生校验反馈
HTML5表单自带校验提示能力，关键不是自己弹alert，而是用setCustomValidity()配合reportValidity()激活原生UI。空字符串表示“校验通过”，非空字符串会阻断提交并显示该文本。
实操建议：
- 校验逻辑结束后，调用
inputElement.setCustomValidity("邮箱格式不正确")或inputElement.setCustomValidity("") - 不要手动修改
title或data-error——原生提示不读这些；浏览器只认setCustomValidity的值 - 若想手动触发红框+气泡提示，调用
inputElement.reportValidity()（注意：这会阻止表单提交，仅用于调试或强制提示）
邮箱/手机号这类格式校验别只靠正则
前端正则只是第一道防线，不能替代后端校验。但实时阶段，过于严格的正则反而影响体验——比如user@domain.co是合法邮箱，但很多“标准”正则会拒绝它。
实操建议：
- 邮箱用宽松匹配：
/.+@.+\..+/，重点防空和明显错（如无@、无点）；更准的交给后端 - 手机号优先用
type="tel"唤起数字键盘，再用pattern做基础位数限制（如pattern="[0-9]{11}"），别硬套运营商号段正则 - 密码强度实时提示建议分层：长度✓、大小写✓、数字✓，而不是“必须含3类且不含重复字符”这种复杂规则
校验状态要同步更新UI样式
只改提示文字不够，用户需要视觉反馈。原生:valid/:invalid伪类能自动响应setCustomValidity，但IE不支持，且无法区分“未输入”和“输错”。
实操建议：
- 用JavaScript动态加class：
inputElement.classList.toggle("error", !isValid)，然后CSS定义.error { border-color: #e53e3e; } - 错误文案容器建议用
<small class="error-message"></small>，避免用title属性（可访问性差，且移动端不显示） - 别在
input事件里反复innerHTML = ""清空提示——先判断是否真需要更新，减少DOM操作
真正难的不是写几行校验逻辑，而是平衡即时性与性能、提示准确性与用户耐心。比如连续快速输入时，上一个校验还没结束，下一个就来了，得用clearTimeout取消前序任务——这个细节，十次中有八次被漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
