车牌号格式化不能依赖过滤器,因H5外平台不支持且Vue 3已移除;应使用@input实时清洗、大写、截断、校验,并封装为工具函数复用。

直接用过滤器格式化车牌号在 uni-app 里不可靠,H5 可能生效,但微信小程序、App 端大概率不触发,甚至编译报错 filters is not defined。别把逻辑堆在模板过滤器里。
为什么车牌号过滤器在小程序/App端基本失效
uni-app 的 Vue 2 模式下,filters 选项仅 H5 平台完整支持;小程序平台(尤其是微信)在编译阶段会忽略 filters 定义,且不报错,导致模板中 {{ plate | formatPlate }} 渲染为空或原值。Vue 3 模式(@dcloudio/uni-app ≥ 3.0.0-alpha)已彻底移除过滤器语法,Vue.filter 调用会直接报错。
正确做法:用 input + @input 实时处理
车牌号有强格式约束(省简称+字母+数字组合),必须在输入过程中干预,而不是等渲染时“补救”。核心是拦截用户输入、清洗、校验、自动大写、限制长度。
- 用
<input type="text" v-model="plateNumber" @input="handlePlateInput" />,不用v-model.lazy或change——要实时响应 -
handlePlateInput中立即调用.toUpperCase(),避免小写混入 - 用正则只保留合法字符:
value.replace(/[^京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼A-Z0-9]/g, '') - 控制最大长度为 8(新能源车牌最多 8 位,如“粤B12345F”),超出部分截断
- 输入完成后再走一次全量校验,失败时用
uni.showToast提示,但不要阻断输入流
想复用逻辑?封装成工具函数,不是过滤器
如果多个页面都要处理车牌号,把清洗逻辑抽成独立函数,放在 utils/plate.js:
export function formatPlate(value) {
if (!value) return ''
return value
.toUpperCase()
.replace(/[^京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼A-Z0-9]/g, '')
.slice(0, 8)
}
export function isValidPlate(value) {
const cleaned = formatPlate(value)
return /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼][A-Z][A-Z0-9]{4,5}[A-Z0-9挂学警港澳]$/.test(cleaned)
}
组件内直接 import 调用,computed 或 methods 里用,稳定、可测、三端一致。
分段输入方案更可控,但不是“过滤器”
如果追求极致体验(比如首字符自动聚焦到省份、第二位固定为字母、后续数字智能补零),就得放弃单输入框 + 过滤器思路,改用三个 <input> 分段绑定:province、letter、number,每段 @input 后手动控制光标和校验。这种方案完全绕开过滤器,逻辑清晰,调试方便,也便于接入键盘优化(如 input-type="number" 切换数字键盘)。
真正难的不是“怎么写正则”,而是确保每次输入都触发清洗、截断、大写、校验四步动作,并且不卡顿、不跳位、不丢焦点——这些在过滤器里根本做不到。


















