vue表单校验核心是合理使用v-decorator（vue2）或v-model:field+rules（vue3），结合内置规则与自定义validator函数实现必填、格式、长度、关联字段、动态表单及异步校验。
Vue 表单校验配合 Ant Design（特别是 ant-design-vue）的核心在于：用好 v-decorator（Vue 2）或 v-model:field + rules（Vue 3 + Composition API），结合内置规则与自定义函数，把业务逻辑“翻译”成可执行的验证配置。
基础规则写法：必填、格式、长度等直接配
不需要写函数也能覆盖大多数场景。规则对象直接写在表单项的 rules 数组里，每条规则是一个对象：
-
必填项：
{ required: true, message: '用户名不能为空' } -
手机号格式：
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' } -
最小长度：
{ min: 6, message: '密码不能少于6位' } -
触发时机控制：
validateTrigger: 'blur'（失焦校验）或'change'（输入即校验）
关联字段校验：比如“确认密码”要和“密码”一致
不能只靠单字段规则，得用自定义函数比对两个值。关键点是：在确认密码字段的 validator 中读取原始密码字段的当前值。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章