Vue.js 表单校验规则清单：vue-form 内置 9 大验证器（required/minlength/pattern）逐一详解

Vue.js 表单校验规则清单：vue-form 内置 9 大验证器（required/minlength/pattern）逐一详解

【免费下载链接】vue-formForm validation for Vue.js 2.2+项目地址: https://gitcode.com/gh_mirrors/vu/vue-form

vue-form 是面向 Vue.js 2.2+ 的轻量表单校验插件，通过一组原生 HTML 风格的属性（如required、minlength、pattern）即可完成字段验证，并自动维护$valid、$invalid、$touched等响应式状态。本文用一份清单带你逐个看懂它内置的 9 大验证器，快速上手表单校验。

3 分钟上手 vue-form

vue-form 通过 npm 安装后，支持全局注册或混入两种用法：

import VueForm from 'vue-form'; Vue.use(VueForm); // 全局注册 // 或 mixins: [VueForm] // 局部混入

安装后即可使用 4 个组件：vue-form（管理表单状态）、validate（包裹校验字段）、field-messages（显示错误/成功消息）、field（字段容器）。一个最小示例如下：

<vue-form :state="formstate" @submit.prevent="onSubmit"> <validate tag="label"> <span>Email</span> <input v-model="model.email" name="email" type="email" required /> <field-messages name="email"> <div slot="required">Email 为必填项</div> <div slot="email">Email 格式不正确</div> </field-messages> </validate> <button type="submit">提交</button> </vue-form>

提交时检查this.formstate.$invalid，为true则拦截提交。完整示例可参考 example/bootstrap.html 与 README.md。

9 大内置验证器清单

内置验证器全部定义在 src/validators.js 中，共 9 个：

"允许空值跳过"指：当输入值为空（''/undefined/null）时，除required外的验证器会直接判定通过，避免空字段被误报格式错误。这一逻辑见 src/components/validate.js。

required：必填校验的细节规则

required并非简单的"非空字符串"判断，源码 src/validators.js#L23-L43 中有三个值得注意的特判：

• 值为 0 时算有效——0是合法数字，不应被当空值；
• 布尔型输入：若检测到bool属性/prop，false也算通过（复选框未勾选不报错）；
• 数组：只要length > 0即通过，适合多选框组。

它还可以用动态绑定实现"条件必填"：:required="isRequired"，绑定值变化时会自动重新校验，这是 vue-form 的一大便利。

minlength / maxlength：长度区间控制

实现非常直接（src/validators.js#L44-L49）：

<input v-model="model.name" name="name" minlength="5" maxlength="25" />

配合field-messages的具名插槽显示对应错误：

<field-messages name="name"> <div slot="minlength">姓名至少 5 个字符</div> <div slot="maxlength">姓名不能超过 25 个字符</div> </field-messages>

插槽名与验证器同名（minlength、maxlength、pattern…），这是 vue-form 显示错误消息的统一规则。

pattern：正则格式校验

pattern验证器会自动在正则两端补上^和$（src/validators.js#L50-L53），即整体精确匹配，无需自己写锚点：

<!-- 电话号码格式：xxxx-xxx-xxxx --> <input name="phone" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" v-model.lazy="model.phone" />

官方示例 example/bootstrap.html#L49-L59 展示了required + pattern组合使用，并用slot="pattern"输出格式错误消息。测试用例中同样有\d\d\d\d四位数字的验证写法，见 test/specs/vue-form.js#L74-L77。

min / max：数值范围校验

min/max对普通输入按字符串比较，但当字段是type="number"时会转换为数字比较（src/validators.js#L54-L65）：

<input type="number" name="minmax" min="4" max="8" v-model="model.minmax" />

测试中该用法位于 test/specs/vue-form.js#L71-L73。

email / url / number：三种 type 即验证器

vue-form 复用了 HTML5 的type属性：写type="email"、type="url"、type="number"就会自动挂上对应验证器，无需额外注册。

• email使用与 Angular 同款正则（src/validators.js#L1-L7），大小写不敏感；
• url要求http://或https://开头且主体不少于 4 个字符（src/validators.js#L14-L17）；
• number用isNaN判断（src/validators.js#L9-L12）。

三者都标记了_allowNulls，空值时不参与校验，交由required兜底。

静态属性 vs 动态绑定

验证器既支持静态属性，也支持v-bind绑定（见 README.md#L181-L198）：

<!-- 静态 --> <input name="name" v-model="model.name" maxlength="25" minlength="5" /> <!-- 动态绑定：绑定更新后自动重新校验，可实现"条件必填" --> <input name="email" v-model="model.email" type="email" :required="isRequired" />

这一机制让"注册时必填、登录时选填"这类场景只需改一个响应式变量。

进阶：自定义与异步验证器

9 个内置验证器不够用？vue-form 支持：

• 全局自定义：Vue.use(VueForm, { validators: { 'my-rule': fn } })，fn返回true/false；
• 局部自定义：通过validate的:custom传入组件 methods/computed 中的函数；
• 异步验证：返回 Promise 的自定义验证器（如调用接口查用户名是否可用），可用防抖降低请求频率。

详见 README.md#L200-L287 与 src/components/validate.js#L273-L292。

校验状态类：给 CSS 联动

校验结果会以 class 形式同步到表单、字段包裹层和输入框，方便直接写样式：

• 表单级：vf-form-dirty、vf-form-valid、vf-form-invalid…
• 输入级：vf-dirty、vf-valid，以及每个错误的专属类，如vf-invalid-required、vf-invalid-minlength、vf-invalid-pattern
• 包裹层：vf-field-dirty、vf-field-invalid…

完整默认配置见 src/config.js 与 README.md#L350-L399。

总结

vue-form 用最小的学习成本覆盖了常见表单校验场景：写熟悉的 HTML 属性，拿响应式的formstate，配合field-messages插槽输出人性化提示——这就是它"轻量但够用"的设计哲学。

【免费下载链接】vue-formForm validation for Vue.js 2.2+项目地址: https://gitcode.com/gh_mirrors/vu/vue-form