Appearance
预定义/自定义校验
本文说明如何为表单项配置预定义校验(快捷规则)与自定义校验(Element Plus 规则),以满足必填、格式、业务规则等校验需求。
预定义校验
AeForm 组件提供 autoRules 能力,通过 快捷校验 属性即可勾选以下预定义规则,无需手写校验代码,覆盖大部分常见场景。
| 规则名称 | 说明 |
|---|---|
| 必填 | 字段不能为空 |
| 必填(数组) | 数组类型至少有一项 |
| 邮箱号 | 符合邮箱格式 |
| 手机号 | 符合大陆手机号格式 |
| 通用电话号码 | 支持固话、手机等 |
| 信用代码 | 统一社会信用代码 |
| 无汉字 | 不允许包含中文字符 |
| 纯数字 | 仅允许数字 |
| 纯字母 | 仅允许英文字母 |
| 无特殊符号 | 不允许特殊字符 |
| 无空格 | 不允许包含空格 |
配置路径:选中组件 → 属性配置 → 标题属性 → 快捷校验。可单选或多选上述规则。
自定义校验
当预定义规则无法满足需求时,可启用 自定义校验,自行编写符合 Element Plus Form 校验规则 的配置。
配置步骤:
- 将组件切换至 专业 模式
- 打开 自定义校验 开关并展开配置栏
- 在代码框中编写并 返回一个数组,数组项为 Element Plus 的
FormItemRule对象
示例一:必填
js
return [{ required: true, message: "必填项不得为空", trigger: "change" }];示例二:长度与格式
js
return [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9_]+$/, message: "仅允许字母、数字和下划线", trigger: "blur" }
];示例三:自定义 validator
js
return [
{
validator: (rule, value, callback) => {
if (value !== formModel.password_confirm) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
},
trigger: "blur"
}
];注意事项
- 使用自定义校验时,返回值必须是数组,且每项符合 Element Plus 的
rules类型(如required、pattern、validator等)。 - 若同时配置了 快捷校验 与 自定义校验,只会生效自定义校验。
- 编写
validator等逻辑时,不会提供formModel,excontext等参数,因此不支持与表单模型和上下文联动。