Vue.js 表单校验规则清单vue-form 内置 9 大验证器required/minlength/pattern逐一详解【免费下载链接】vue-formForm validation for Vue.js 2.2项目地址: https://gitcode.com/gh_mirrors/vu/vue-formvue-form 是面向 Vue.js 2.2 的轻量表单校验插件通过一组原生 HTML 风格的属性如required、minlength、pattern即可完成字段验证并自动维护$valid、$invalid、$touched等响应式状态。本文用一份清单带你逐个看懂它内置的 9 大验证器快速上手表单校验。3 分钟上手 vue-formvue-form 通过 npm 安装后支持全局注册或混入两种用法import VueForm from vue-form; Vue.use(VueForm); // 全局注册 // 或 mixins: [VueForm] // 局部混入安装后即可使用 4 个组件vue-form管理表单状态、validate包裹校验字段、field-messages显示错误/成功消息、field字段容器。一个最小示例如下vue-form :stateformstate submit.preventonSubmit validate taglabel spanEmail/span input v-modelmodel.email nameemail typeemail required / field-messages nameemail div slotrequiredEmail 为必填项/div div slotemailEmail 格式不正确/div /field-messages /validate button typesubmit提交/button /vue-form提交时检查this.formstate.$invalid为true则拦截提交。完整示例可参考 example/bootstrap.html 与 README.md。9 大内置验证器清单内置验证器全部定义在 src/validators.js 中共 9 个#验证器触发方式作用允许空值跳过1requiredrequired属性非空校验0、false、非空数组均算有效-2minlengthminlength5字符串长度下限✅3maxlengthmaxlength25字符串长度上限✅4patternpattern\d{4}正则格式匹配自动首尾锚定✅5minmin4数值下限配合typenumber按数字比较✅6maxmax8数值上限配合typenumber按数字比较✅7emailtypeemail邮箱格式校验✅8urltypeurl必须以 http:// 或 https:// 开头且不少于 6 字符✅9numbertypenumber数值合法性校验isNaN判断✅允许空值跳过指当输入值为空/undefined/null时除required外的验证器会直接判定通过避免空字段被误报格式错误。这一逻辑见 src/components/validate.js。required必填校验的细节规则required并非简单的非空字符串判断源码 src/validators.js#L23-L43 中有三个值得注意的特判值为 0 时算有效——0是合法数字不应被当空值布尔型输入若检测到bool属性/propfalse也算通过复选框未勾选不报错数组只要length 0即通过适合多选框组。它还可以用动态绑定实现条件必填:requiredisRequired绑定值变化时会自动重新校验这是 vue-form 的一大便利。minlength / maxlength长度区间控制实现非常直接src/validators.js#L44-L49input v-modelmodel.name namename minlength5 maxlength25 /配合field-messages的具名插槽显示对应错误field-messages namename div slotminlength姓名至少 5 个字符/div div slotmaxlength姓名不能超过 25 个字符/div /field-messages插槽名与验证器同名minlength、maxlength、pattern…这是 vue-form 显示错误消息的统一规则。pattern正则格式校验pattern验证器会自动在正则两端补上^和$src/validators.js#L50-L53即整体精确匹配无需自己写锚点!-- 电话号码格式xxxx-xxx-xxxx -- input namephone typetel pattern^\d{4}-\d{3}-\d{4}$ v-model.lazymodel.phone /官方示例 example/bootstrap.html#L49-L59 展示了required pattern组合使用并用slotpattern输出格式错误消息。测试用例中同样有\d\d\d\d四位数字的验证写法见 test/specs/vue-form.js#L74-L77。min / max数值范围校验min/max对普通输入按字符串比较但当字段是typenumber时会转换为数字比较src/validators.js#L54-L65input typenumber nameminmax min4 max8 v-modelmodel.minmax /测试中该用法位于 test/specs/vue-form.js#L71-L73。email / url / number三种 type 即验证器vue-form 复用了 HTML5 的type属性写typeemail、typeurl、typenumber就会自动挂上对应验证器无需额外注册。email使用与 Angular 同款正则src/validators.js#L1-L7大小写不敏感url要求http://或https://开头且主体不少于 4 个字符src/validators.js#L14-L17number用isNaN判断src/validators.js#L9-L12。三者都标记了_allowNulls空值时不参与校验交由required兜底。静态属性 vs 动态绑定验证器既支持静态属性也支持v-bind绑定见 README.md#L181-L198!-- 静态 -- input namename v-modelmodel.name maxlength25 minlength5 / !-- 动态绑定绑定更新后自动重新校验可实现条件必填 -- input nameemail v-modelmodel.email typeemail :requiredisRequired /这一机制让注册时必填、登录时选填这类场景只需改一个响应式变量。进阶自定义与异步验证器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。总结场景推荐写法必填字段required数字 0、布尔 false、多选组均友好文本长度minlengthmaxlength组合固定格式pattern自动锚定整体匹配数字范围typenumbermin/max邮箱/链接直接写typeemail/typeurlvue-form 用最小的学习成本覆盖了常见表单校验场景写熟悉的 HTML 属性拿响应式的formstate配合field-messages插槽输出人性化提示——这就是它轻量但够用的设计哲学。【免费下载链接】vue-formForm validation for Vue.js 2.2项目地址: https://gitcode.com/gh_mirrors/vu/vue-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/27 15:45:38 · 阅读 1.2k 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-formvue-form 是面向 Vue.js 2.2 的轻量表单校验插件通过一组原生 HTML 风格的属性如required、minlength、pattern即可完成字段验证并自动维护$valid、$invalid、$touched等响应式状态。本文用一份清单带你逐个看懂它内置的 9 大验证器快速上手表单校验。3 分钟上手 vue-formvue-form 通过 npm 安装后支持全局注册或混入两种用法import VueForm from vue-form; Vue.use(VueForm); // 全局注册 // 或 mixins: [VueForm] // 局部混入安装后即可使用 4 个组件vue-form管理表单状态、validate包裹校验字段、field-messages显示错误/成功消息、field字段容器。一个最小示例如下vue-form :stateformstate submit.preventonSubmit validate taglabel spanEmail/span input v-modelmodel.email nameemail typeemail required / field-messages nameemail div slotrequiredEmail 为必填项/div div slotemailEmail 格式不正确/div /field-messages /validate button typesubmit提交/button /vue-form提交时检查this.formstate.$invalid为true则拦截提交。完整示例可参考 example/bootstrap.html 与 README.md。9 大内置验证器清单内置验证器全部定义在 src/validators.js 中共 9 个#验证器触发方式作用允许空值跳过1requiredrequired属性非空校验0、false、非空数组均算有效-2minlengthminlength5字符串长度下限✅3maxlengthmaxlength25字符串长度上限✅4patternpattern\d{4}正则格式匹配自动首尾锚定✅5minmin4数值下限配合typenumber按数字比较✅6maxmax8数值上限配合typenumber按数字比较✅7emailtypeemail邮箱格式校验✅8urltypeurl必须以 http:// 或 https:// 开头且不少于 6 字符✅9numbertypenumber数值合法性校验isNaN判断✅允许空值跳过指当输入值为空/undefined/null时除required外的验证器会直接判定通过避免空字段被误报格式错误。这一逻辑见 src/components/validate.js。required必填校验的细节规则required并非简单的非空字符串判断源码 src/validators.js#L23-L43 中有三个值得注意的特判值为 0 时算有效——0是合法数字不应被当空值布尔型输入若检测到bool属性/propfalse也算通过复选框未勾选不报错数组只要length 0即通过适合多选框组。它还可以用动态绑定实现条件必填:requiredisRequired绑定值变化时会自动重新校验这是 vue-form 的一大便利。minlength / maxlength长度区间控制实现非常直接src/validators.js#L44-L49input v-modelmodel.name namename minlength5 maxlength25 /配合field-messages的具名插槽显示对应错误field-messages namename div slotminlength姓名至少 5 个字符/div div slotmaxlength姓名不能超过 25 个字符/div /field-messages插槽名与验证器同名minlength、maxlength、pattern…这是 vue-form 显示错误消息的统一规则。pattern正则格式校验pattern验证器会自动在正则两端补上^和$src/validators.js#L50-L53即整体精确匹配无需自己写锚点!-- 电话号码格式xxxx-xxx-xxxx -- input namephone typetel pattern^\d{4}-\d{3}-\d{4}$ v-model.lazymodel.phone /官方示例 example/bootstrap.html#L49-L59 展示了required pattern组合使用并用slotpattern输出格式错误消息。测试用例中同样有\d\d\d\d四位数字的验证写法见 test/specs/vue-form.js#L74-L77。min / max数值范围校验min/max对普通输入按字符串比较但当字段是typenumber时会转换为数字比较src/validators.js#L54-L65input typenumber nameminmax min4 max8 v-modelmodel.minmax /测试中该用法位于 test/specs/vue-form.js#L71-L73。email / url / number三种 type 即验证器vue-form 复用了 HTML5 的type属性写typeemail、typeurl、typenumber就会自动挂上对应验证器无需额外注册。email使用与 Angular 同款正则src/validators.js#L1-L7大小写不敏感url要求http://或https://开头且主体不少于 4 个字符src/validators.js#L14-L17number用isNaN判断src/validators.js#L9-L12。三者都标记了_allowNulls空值时不参与校验交由required兜底。静态属性 vs 动态绑定验证器既支持静态属性也支持v-bind绑定见 README.md#L181-L198!-- 静态 -- input namename v-modelmodel.name maxlength25 minlength5 / !-- 动态绑定绑定更新后自动重新校验可实现条件必填 -- input nameemail v-modelmodel.email typeemail :requiredisRequired /这一机制让注册时必填、登录时选填这类场景只需改一个响应式变量。进阶自定义与异步验证器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。总结场景推荐写法必填字段required数字 0、布尔 false、多选组均友好文本长度minlengthmaxlength组合固定格式pattern自动锚定整体匹配数字范围typenumbermin/max邮箱/链接直接写typeemail/typeurlvue-form 用最小的学习成本覆盖了常见表单校验场景写熟悉的 HTML 属性拿响应式的formstate配合field-messages插槽输出人性化提示——这就是它轻量但够用的设计哲学。【免费下载链接】vue-formForm validation for Vue.js 2.2项目地址: https://gitcode.com/gh_mirrors/vu/vue-form创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考