Vue 3 中表单校验怎么处理特殊字符的过滤与校验-Vue.js-PHP中文网

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

vue 3处理特殊字符需“输入时过滤”和“失焦/提交时校验”双线并行：输入阶段用v-model.trim和@input+正则替换函数实时清理；校验阶段用rules中validator函数语义化提示，如含特殊字符则callback(new error('不能包含特殊字符'))。

vue 3 中表单校验怎么处理特殊字符的过滤与校验

Vue 3 中处理特殊字符，核心是“输入时过滤”和“失焦/提交时校验”双线并行，不是只靠 rules 一锤定音。关键在于区分场景：用户打字过程中要实时清理（比如自动删掉`！@#￥%`），而正式校验则需明确提示“不能含特殊字符”。

输入阶段：用 .trim + 自定义过滤函数自动清理

在 el-input 或 van-field 上，不单靠 v-model，而是配合修饰符和函数拦截：

v-model.trim：自动去除首尾空格，是最基础但必加的一步
@input + 替换函数：监听每次输入，用正则直接过滤掉非法字符

例如封装一个通用过滤函数：

utils/validate.ts

export const replaceCommonText = (e: Event | string): string => {
  const val = typeof e === 'string' ? e : (e.target as HTMLInputElement).value
  // 匹配常见特殊字符（不含空格、下划线、中英文标点）
  return val.replace(/[`~!@#$%^&*()_+=[]{}|;':",./?\—·～《》]/g, '')
}

页面中使用：

<el-input v-model="form.title"> form.title = replaceCommonText(e)" 
/></el-input>

校验阶段：rules 中用 validator 做语义化提示

过滤只是“不让它存”，校验才是“告诉用户为什么不行”。用自定义校验器，在 blur 或 submit 时触发检查：

校验器接收 value，判断是否含特殊字符
若命中，调用 callback(new Error('xxx')) 报错
若通过，必须调用 callback()（无参）否则视为失败

示例规则：

const validateNoSpecialChar = (_rule: any, value: string, callback: Function) => {
  const pattern = /[`~!@#$%^&*()_+=[]{}|;':",./?\—·～《》]/
  if (pattern.test(value)) {
    callback(new Error('不能包含特殊字符'))
  } else {
    callback()
  }
}

const rules = {
  title: [{ validator: validateNoSpecialChar, trigger: 'blur' }]
}