自定义表单校验规则

支持版本：v1.15.0

智能表单支持以插件的方式集成自定义的表单校验。关于表单校验一共牵涉 4 个校验方法：

• formValidate 表单同步校验方法
• formValidateAsync 表单异步校验方法
• subFormValidate 弹窗子表单表单项的同步校验方法
• subFormValidateAsync 弹窗子表单表单项的异步校验方法

如何使用

自定义表单校验规则

src/plugins/validate/index.ts

import AppSetting from "@sinoform/app-setting";

/**
 * 表单同步校验方法
 *
 * 接收两个参数：
 *
 * - 表单id：表单id如果为''或者'*'，视为校验方法对所有的表单都适用
 * - 字段项校验方法对象
 *    - key: 表单项的fieldName
 *    - value: 校验方法，只能是同步的方法。接收两个参数：当前表单项的值和整个表单的值。
 *             如果校验不通过，返回校验结果说明字符串，否则返回undefined
 */
AppSetting.formValidate("61c99ea3c9327f1d0cb7ef26", {
  // num1与表单项num2的值进行大小判定
  num1: (value, values) => {
    if (value && values.num2 && Number(value) > Number(values.num2)) {
      return "num1不能比num2大";
    }
    return undefined;
  },

  // count进行非空校验
  count: (value) => {
    if (!value) return "count不能为空";
    return undefined;
  },
});

/**
 * 表单异步校验方法
 *
 * 接收两个参数：
 *
 * - 表单id：表单id如果为''或者'*'，视为校验方法对所有的表单都适用
 * - 字段项校验方法对象
 *    - key: 表单项的fieldName
 *    - value: 异步校验方法，可以是同步的方法。接收两个参数：当前表单项的值和整个表单的值
 *
 */
AppSetting.formValidateAsync("61c99ea3c9327f1d0cb7ef26", {
  // 通过异步方法校验name值是否符合标准
  name: async (value) => {
    if (value) {
      return validateNameAsync(value);
    }
    return undefined;
  },
});

/**
 * 弹窗子表单表单项的同步校验方法
 *
 * 接收三个参数：
 *
 * - 表单id：由于要匹配子表单的fieldName，不支持通配符匹配
 * - 子表单fieldName: 弹窗子表单的fieldName，用于判定校验规则适用于当前表单中的哪个子表单
 * - 字段项校验方法对象
 *    - key: 表单项的fieldName
 *    - value: 校验方法，必须是同步的方法。方法最多接收四个参数
 *        - 当前表单项的值
 *        - 当前编辑的这条子表单数据
 *        - 当前子表单的数据，不包含正在编辑的子表单的数据
 *        - 完整的表单数据
 */
AppSetting.subFormValidate("61c99ea3c9327f1d0cb7ef26", "field_10", {
  // id_card用于存储用户身份信息，通过当前值和整个子表单的数据，判定用户是否重复添加
  id_card: (value: any, itemValues: any, subFormValues: any = []) => {
    if (value && subFormValues.some((item) => item.id_card === value)) {
      return "身份信息不能重复";
    }
    return undefined;
  },
});

/**
 * 弹窗子表单表单项的异步校验方法
 *
 * - 表单id：由于要匹配子表单的fieldName，不支持通配符匹配
 * - 子表单fieldName: 弹窗子表单的fieldName，用于判定校验规则适用于当前表单中的哪个子表单
 * - 字段项校验方法对象
 *    - key: 表单项的fieldName
 *    - value: 异步校验方法，可以是同步的方法。方法最多接收四个参数
 *        - 当前表单项的值
 *        - 当前编辑的这条子表单数据
 *        - 当前子表单的数据，不包含正在编辑的子表单的数据
 *        - 完整的表单数据
 */
AppSetting.subFormValidate("61c99ea3c9327f1d0cb7ef26", "field_10", {
  // 通过异步方法校验name值是否符合标准
  name: async (value) => {
    if (value) {
      return validateNameAsync(value);
    }
    return undefined;
  },
});

注册该校验规则文件

在插件项目的入口文件中引用上述校验规则的文件即为注册。

src/index.ts

import "./plugins/validate";