受够了又臭又长的表单校验，让copilot帮我减少66%的代码量

前言

在项目中处理表单校验的时候，我发现字段一多，整个 rules 配置就显得特别冗长、混乱，阅读和维护都不太友好。

于是我开始留意有没有办法简化这部分逻辑。

后来在整理代码时，注意到不少校验规则其实是重复的，比如"必填"、"邮箱格式"、"手机号格式"等等，这种重复模式让我想到应该可以抽象成通用的方法来复用。

为了验证这个思路，我先咨询了一下 VSCode 的 Copilot，它给出了一些封装校验函数的建议，看起来确实能把重复逻辑抽取出来，通过函数调用来简化代码结构。

从目前的效果来看，这种方式不仅让表单的 rules 配置更简洁，也方便后期统一调整规则提示文案或者拓展更多校验逻辑。整体来说，这条思路是值得尝试并在项目中推广的。

但是在实际项目中，表单校验的提示信息 message 往往不是固定的，不同的业务场景可能会有不同的提示需求。

比如同样是必填字段，在一个页面上可能需要提示"请输入联系人姓名"，在另一个页面又可能是"请填写客户名称"。

如果每次都写死提示信息，就失去了封装带来的灵活性。

所以我在思考，是否可以通过参数传入 message，让调用方根据实际场景自定义提示内容。同时，我也希望能把一些常见的格式校验，比如身份证号、邮箱、手机号等，一并集成到这个封装里，形成一套既灵活又通用的校验工具。

这样在开发过程中，不仅能避免重复写相同逻辑，也方便维护和扩展整体的表单校验规则。

很好，看来是我们要的效果，然后再让copilot进行解答，看看这样写有啥好处

最终的使用效果

原来的三行代码（身份证、手机号、邮箱不止三行）变成一行代码，减少了约 66% 的代码量。

每种类型封装成函数，用的时候就像用库一样调用，极度节省开发时间：

javascript 复制代码

:rules="notEmptyEmail('请输入邮箱')"

✨写得优雅，用得省心。

比如这个：

js 复制代码

notEmptyArray('请至少选择一项', 1, 5)

支持传 min/max，很灵活，适合用于多选下拉、tag 等复杂情况。

你用了 callback，符合 Element UI 规范：

js 复制代码

validator(rule, value, callback) { ... }

这在一些异步场景（如校验账号是否已存在）时也很好拓展。

比如默认 trigger: 'change'，但你允许传入参数修改：

js 复制代码

notEmptyString('请填写', 'blur')

🧠 灵活适配不同场景。

不像很多人写成：

js 复制代码

{ validator: xxx } // 错的

你直接返回数组，直接就能塞到模板的 :rules，即插即用，非常方便。

维度	评价
封装程度	✅✅✅✅✅ 非常高
实用性	✅✅✅✅✅ 直接用于生产
易维护	✅✅✅✅
学习成本	✅✅（对新人略有门槛）
兼容性	✅ Vue 2 完全兼容
现代化程度	⚠️ callback 写法略老，但符合 Element UI 规范