vue 3 自定义表单组件支持失焦验证需透传 blur 事件、对齐 el-form 三要素（modelvalue 同步、prop 一致、ref 可访问），并结合 trim 和非法字符预处理确保校验准确性。
Vue 3 中自定义表单组件要支持失焦验证，核心是把原生 blur 事件正确透传，并让父表单（如 <el-form></el-form> 或校验逻辑）能感知到该字段的变化和校验时机。
确保 blur 事件能被父级捕获
自定义组件内部需主动触发 blur，不能只监听不派发：
- 在输入框（
<input>、<textarea></textarea>等）上绑定@blur="handleBlur" -
handleBlur中调用emit('blur')，向外抛出事件 - 父组件使用时，可直接写
@blur="validateField('fieldName')"或交由el-form自动处理
与 el-form 配合的关键三要素必须对齐
若用 Element Plus 的 <el-form></el-form>，自定义组件需满足其校验前提：
- 组件接收
modelValue并通过emit('update:modelValue', val)同步数据 - 组件接受
prop属性（如account），且<el-form-item prop="account"></el-form-item>中的prop值必须和:model对象里的字段名、:rules中的规则键名完全一致 - 组件内部不拦截
blur，且保证ref可被el-form实例方法（如validate）访问到（推荐用defineExpose暴露focus/blur方法）
手动触发校验的常见写法
在自定义组件内部或父组件中，失焦后立即校验单个字段：
- 父组件调用
formRef.value.validateField('fieldName', callback)，callback 接收错误消息 - 自定义组件内部 emit blur 后，可通过
defineExpose提供validate方法，供父组件按需调用 - 若用 Composition API，可结合
useField（VeeValidate）或async-validator封装校验逻辑，在handleBlur中执行runValidation()
注意 trim 和非法字符预处理
失焦时往往需要清理和初筛，避免脏数据进入校验流程：
- v-model 绑定时加
.trim（v-model.trim="xxx"）自动去首尾空格 - blur 回调里用正则判断是否含非法字符（如
/[`~!@#$%^&*()_+=[]{};':\|,./?]/），不符合就ElMessage.warning提示并聚焦回当前输入框 - 校验失败时不提交，也不清空已输内容，方便用户修正
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
