form-create表单验证全攻略：从基础规则到自定义校验
项目地址: https://gitcode.com/gh_mirrors/fo/form-create 引言
你还在为复杂表单的验证逻辑烦恼吗？还在手动编写大量重复的校验代码吗？form-create作为一款强大的动态表单生成器（form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON），提供了全面的表单验证解决方案。本文将带你深入了解form-create的表单验证机制，从基础规则到高级自定义校验，助你轻松应对各种复杂的表单验证场景。
读完本文，你将能够：
- 掌握form-create的基础验证规则配置
- 实现常见的表单验证场景（如必填项、长度限制、数值范围等）
- 自定义复杂的验证规则和错误提示
- 处理动态表单和关联字段的验证逻辑
- 优化表单验证的用户体验
1. form-create验证机制概述
form-create的表单验证基于JSON配置，通过在字段定义中添加validate属性来实现。验证规则会在表单提交或字段值变化时自动触发，确保用户输入的数据符合预期。
1.1 验证流程
1.2 验证规则结构
form-create的验证规则是一个数组，每个规则对象包含以下属性：
| 属性 | 类型 | 说明 |
|---|---|---|
| required | boolean | 是否为必填项 |
| type | string | 字段类型，如'number'、'array'等 |
| min | number | 最小值或最小长度 |
| max | number | 最大值或最大长度 |
| message | string | 验证失败时的错误提示 |
| trigger | string | 触发验证的时机，'change'或'blur' |
2. 基础验证规则实战
2.1 必填项验证
最常见的验证需求是确保用户填写了必要的字段。通过required: true实现：
maker.input('商品名称', 'goods_name', 'iphone').validate([
{required: true, message: '请输入商品名称', trigger: 'change'}
])
2.2 长度限制
对输入的文本长度进行限制，使用min和max属性：
maker.input('商品名称', 'goods_name', 'iphone').props({
maxlength: 10, // 输入框 maxlength 属性
}).validate([
{required: true, message: '请输入商品名称', trigger: 'change'},
{min: 2, max: 10, message: '商品名称长度必须在2-10个字符之间', trigger: 'blur'}
])
2.3 数值验证
对于数字类型的字段，可以验证其数值范围：
maker.number('排序', 'sort', 0).validate([
{required: true, type: 'number', min: 10, message: '排序值必须大于等于10', trigger: 'change'}
])
2.4 数组验证
对于多选框、文件上传等返回数组的组件，可以验证数组长度：
maker.frame('素材', 'fodder', ['http://form-create.com/logo.png']).validate([
{required: true, type: 'array', min: 2, message: '请选择2张图片', trigger: 'change'}
])
2.5 常见验证规则示例
// 邮箱验证
maker.input('邮箱', 'email', '').validate([
{type: 'email', message: '请输入正确的邮箱格式', trigger: 'change'}
])
// URL验证
maker.input('网站地址', 'url', '').validate([
{type: 'url', message: '请输入正确的URL格式', trigger: 'change'}
])
// 正则表达式验证
maker.input('手机号码', 'phone', '').validate([
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change'}
])
3. 高级验证场景
3.1 动态验证规则
根据其他字段的值动态改变验证规则：
maker.radio('是否包邮', 'is_postage', 1).options([
{value: 0, label: '不包邮'},
{value: 1, label: '包邮'}
]).control([
{
value: 1, // 当选择"包邮"时
rule: [
maker.number('满额包邮金额', 'postage_money', 0).validate([
{required: true, type: 'number', min: 100, message: '满额包邮金额必须大于等于100', trigger: 'change'}
])
]
}
])
3.2 数组字段验证
对数组类型的字段进行验证，如确保至少选择N项：
maker.checkbox('标签', 'label', [1,2]).options([
{value: 1, label: '好用'},
{value: 2, label: '方便'},
{value: 3, label: '实用'},
{value: 4, label: '有效'}
]).validate([
{type: 'array', min: 2, message: '至少选择2个标签', trigger: 'change'}
])
3.3 评分组件验证
结合评分组件，实现条件验证：
maker.rate('推荐级别', 'rate', 2).validate({
required: true,
type: 'number',
min: 3,
message: '请大于3颗星',
trigger: 'change'
}).control([
{
handle: function (val) {
return val > 5;
},
rule: [
maker.input('好评原因', 'goods_reason', '').validate([
{required: true, message: '请输入好评原因', trigger: 'change'}
])
]
}, {
handle: function (val) {
return val < 5;
},
rule: [
maker.input('差评原因', 'bad_reason', '').validate([
{required: true, message: '请输入差评原因', trigger: 'change'}
])
]
}
])
4. 自定义验证规则
4.1 简单自定义验证
通过validator函数实现简单的自定义验证逻辑：
maker.input('确认密码', 'confirm_password', '').validate([
{
validator: (rule, value, callback) => {
if (value !== this.formData.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
trigger: 'change'
}
])
4.2 复杂自定义验证
对于更复杂的验证需求，可以定义独立的验证函数：
// 定义验证函数
function validatePassword(rule, value, callback) {
if (value.length < 8) {
callback(new Error('密码长度不能少于8个字符'));
return;
}
// 检查是否包含数字
if (!/\d/.test(value)) {
callback(new Error('密码必须包含数字'));
return;
}
// 检查是否包含字母
if (!/[a-zA-Z]/.test(value)) {
callback(new Error('密码必须包含字母'));
return;
}
callback();
}
// 使用自定义验证函数
maker.input('密码', 'password', '').validate([
{required: true, message: '请输入密码', trigger: 'change'},
{validator: validatePassword, trigger: 'change'}
])
4.3 异步验证
处理需要异步请求的验证，如检查用户名是否已存在：
maker.input('用户名', 'username', '').validate([
{
validator: (rule, value, callback) => {
// 模拟异步请求
setTimeout(() => {
if (['admin', 'user', 'test'].includes(value)) {
callback(new Error('用户名已存在'));
} else {
callback();
}
}, 1000);
},
trigger: 'blur'
}
])
5. 验证优化与最佳实践
5.1 验证时机选择
合理选择验证触发时机，提升用户体验：
trigger: 'change'- 字段值变化时立即验证，适合简单验证trigger: 'blur'- 字段失去焦点时验证，适合复杂验证或异步验证trigger: ['change', 'blur']- 组合触发，兼顾即时反馈和性能
// 简单验证，使用change触发
maker.input('手机号', 'phone', '').validate([
{pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change'}
])
// 异步验证，使用blur触发
maker.input('用户名', 'username', '').validate([
{validator: checkUsernameExists, trigger: 'blur'}
])
5.2 错误提示优化
设计清晰、友好的错误提示，帮助用户快速修正输入：
// 不好的提示方式
{required: true, message: '错误', trigger: 'change'}
// 好的提示方式
{required: true, message: '请输入商品名称（至少2个字符，最多10个字符）', trigger: 'change'}
5.3 性能优化
对于复杂表单，优化验证性能：
- 避免过度验证，合理设置验证触发时机
- 复杂验证使用防抖处理
- 异步验证添加加载状态，防止重复请求
// 使用防抖优化复杂验证
import { debounce } from 'lodash';
const complexValidator = debounce((rule, value, callback) => {
// 复杂验证逻辑
}, 500);
maker.input('复杂字段', 'complex_field', '').validate([
{validator: complexValidator, trigger: 'change'}
])
5.4 动态表单验证
对于动态添加/删除的表单字段，确保验证规则也能动态应用：
maker.group('批量添加', 'group', []).props({
rule: [
{
type: 'input',
field: 'field2',
title: '字段',
validate: [
{required: true, message: '此字段为必填项', trigger: 'change'}
]
}
]
}).validate([
{required: true, type: 'array', min: 3, message: '最少增加3项', trigger: 'change'}
])
6. 完整示例：电商商品表单验证
以下是一个完整的电商商品表单验证示例，综合运用了多种验证规则：
export default function mock() {
return [
// 商品基本信息
maker.input('商品名称', 'goods_name', '').validate([
{required: true, message: '请输入商品名称', trigger: 'change'},
{min: 2, max: 50, message: '商品名称长度必须在2-50个字符之间', trigger: 'blur'}
]),
maker.select('产品分类', 'cate_id', '').options([
{'value': '104', 'label': '生态蔬菜'},
{'value': '106', 'label': '植物'},
{'value': '105', 'label': '新鲜水果'}
]).validate([
{required: true, message: '请选择产品分类', trigger: 'change'}
]),
maker.number('商品价格', 'price', 0).validate([
{required: true, type: 'number', min: 0.01, message: '价格必须大于0', trigger: 'change'}
]),
// 库存和物流信息
maker.number('库存数量', 'stock', 0).validate([
{required: true, type: 'number', min: 0, message: '库存不能为负数', trigger: 'change'}
]),
maker.radio('是否包邮', 'is_postage', 1).options([
{value: 0, label: '不包邮'},
{value: 1, label: '包邮'}
]).control([
{
value: 1,
rule: [
maker.number('满额包邮金额', 'postage_money', 0).validate([
{required: true, type: 'number', min: 100, message: '满额包邮金额必须大于等于100', trigger: 'change'}
])
]
}
]),
// 商品描述和图片
maker.textarea('商品简介', 'goods_info', '').props({
autosize: {minRows: 4, maxRows: 8}
}).validate([
{required: true, min: 10, message: '商品简介至少10个字符', trigger: 'change'}
]),
maker.upload('商品图片', 'pic', []).validate([
{required: true, type: 'array', min: 1, message: '至少上传1张商品图片', trigger: 'change'}
]),
// 标签和推荐
maker.checkbox('商品标签', 'tags', []).options([
{value: 1, label: '新品'},
{value: 2, label: '热销'},
{value: 3, label: '优惠'},
{value: 4, label: '限时'}
]).validate([
{type: 'array', min: 1, max: 3, message: '选择1-3个商品标签', trigger: 'change'}
]),
maker.rate('推荐级别', 'recommend_level', 3).validate({
required: true,
type: 'number',
min: 3,
message: '推荐级别至少3颗星',
trigger: 'change'
})
];
}
7. 总结与进阶
form-create提供了强大而灵活的表单验证功能，通过本文介绍的基础规则、高级技巧和自定义方法，你可以应对大多数表单验证场景。
7.1 关键知识点回顾
- form-create验证基于JSON配置，通过
validate属性实现 - 支持多种触发时机和错误提示方式
- 可以通过
validator函数实现复杂的自定义验证 - 动态表单和关联字段的验证需要特别处理
- 合理的验证策略可以提升用户体验和表单提交效率
7.2 进阶学习路径
- 深入研究form-create源码，了解验证机制的实现细节
- 开发自定义验证规则库，封装常用的业务验证逻辑
- 结合UI框架，实现更友好的验证错误提示样式
- 探索表单验证的自动化测试方法
7.3 常见问题解答
Q: 如何在表单提交前手动触发验证？
A: 可以使用form-create实例的validate方法：
this.$refs.formCreate.validate(valid => {
if (valid) {
// 验证通过，提交表单
}
});
Q: 如何忽略某些字段的验证？
A: 在字段定义中添加validate: false可以禁用该字段的验证。
Q: 如何动态修改验证规则？
A: 可以通过setRule方法动态更新字段的验证规则：
this.$refs.formCreate.setRule('fieldName', [/* 新的验证规则 */]);
希望本文对你掌握form-create表单验证有所帮助！如有任何问题或建议，欢迎在评论区留言讨论。
如果觉得本文对你有帮助，请点赞、收藏并关注我们，获取更多form-create使用技巧和最佳实践。
下期预告：form-create动态表单高级技巧：从嵌套表单到动态布局
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
