Skip to content

预定义/自定义校验

本文说明如何为表单项配置预定义校验(快捷规则)与自定义校验(Element Plus 规则),以满足必填、格式、业务规则等校验需求。

预定义校验

AeForm 组件提供 autoRules 能力,通过 快捷校验 属性即可勾选以下预定义规则,无需手写校验代码,覆盖大部分常见场景。

规则名称说明
必填字段不能为空
必填(数组)数组类型至少有一项
邮箱号符合邮箱格式
手机号符合大陆手机号格式
通用电话号码支持固话、手机等
信用代码统一社会信用代码
无汉字不允许包含中文字符
纯数字仅允许数字
纯字母仅允许英文字母
无特殊符号不允许特殊字符
无空格不允许包含空格

配置路径:选中组件 → 属性配置标题属性快捷校验。可单选或多选上述规则。

自定义校验

当预定义规则无法满足需求时,可启用 自定义校验,自行编写符合 Element Plus Form 校验规则 的配置。

配置步骤

  1. 将组件切换至 专业 模式
  2. 打开 自定义校验 开关并展开配置栏
  3. 在代码框中编写并 返回一个数组,数组项为 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 类型(如 requiredpatternvalidator 等)。
  • 若同时配置了 快捷校验自定义校验,只会生效自定义校验
  • 编写 validator 等逻辑时,不会提供 formModel, excontext 等参数,因此不支持与表单模型和上下文联动。