支持复杂类型的数据校验

对于文本输入框等普通的单元格类型，您可以直接使用 支持数据校验 功能实现数据校验功能。

但是有些复杂类型的单元格，比如表格、树等同一个单元格类型内，需要对不同的模块分别设置数据校验，那么就需要使用到本章方式了。

设计时配置

本例以一个表格单元格的Demo代码为例，说明如何在表格单元格上，分别为不同列设置数据校验。

如上图所示，单元格类型可以为多个列分别配置数据校验，上述示例的代码如下所示：

[Icon("pack://application:,,,/Test;component/Resources/Icon.png")]
[Designer("Test.Designer.TestTableCellTypeDesigner, Test")]
public class TestTableCellType : CellType
{
    [DisplayName("列设置")]
    [ObjectListProperty(ItemType = typeof(TestTableColumnConfig), DefaultName = "列")]
    public List<INamedObject> Columns { get; set; } = new List<INamedObject>();
}

public class TestTableColumnConfig : ObjectPropertyBase, INamedObject
{
    public string Name { get; set; }

    [DisplayName("数据验证")]
    [DataValidationSetting]
    public ForguncyDataValidationInfo DataValidation { get; set; }
}

您可以使用 ObjectListProperty类型的属性作为表格的列定义，然后在属性内，使用 ForguncyDataValidtionInfo类型的子属性定义每一个列的数据验证信息，从而实现为一个复杂类型的单元格类型中的不同模块分别设置数据验证功能。

需要注意的是，**DataValidationSettingAttribute**特性拥有两个入参：

1. DataValidationType：表示支持的数据验证类型，默认为 ForguncyDataValidationType.All 表示支持所有类型。您可以如下例所示隐藏 命令设置项：

[Icon("pack://application:,,,/Test;component/Resources/Icon.png")]
[Designer("Test.Designer.TestTableCellTypeDesigner, Test")]
public class TestTableCellType : CellType
{
    [DisplayName("列设置")]
    [ObjectListProperty(ItemType = typeof(TestTableColumnConfig), DefaultName = "列")]
    public List<INamedObject> Columns { get; set; } = new List<INamedObject>();
}

public class TestTableColumnConfig : ObjectPropertyBase, INamedObject
{
    public string Name { get; set; }

    [DisplayName("数据验证")]
    [DataValidationSetting(DataValidationType = ForguncyDataValidationType.All ^ ForguncyDataValidationType.Command)]
    public ForguncyDataValidationInfo DataValidation { get; set; }
}

2. IsDisplayErrorMessageTo：表示错误信息输出的目标配置项是否展示，默认为 false 表示不展示。您可以如下例配置展示此配置项：

[Icon("pack://application:,,,/Test;component/Resources/Icon.png")]
[Designer("Test.Designer.TestTableCellTypeDesigner, Test")]
public class TestTableCellType : CellType
{
    [DisplayName("列设置")]
    [ObjectListProperty(ItemType = typeof(TestTableColumnConfig), DefaultName = "列")]
    public List<INamedObject> Columns { get; set; } = new List<INamedObject>();
}

public class TestTableColumnConfig : ObjectPropertyBase, INamedObject
{
    public string Name { get; set; }

    [DisplayName("数据验证")]
    [DataValidationSetting(IsDisplayErrorMessageTo = true)]
    public ForguncyDataValidationInfo DataValidation { get; set; }
}

参数说明

数据验证的返回值最终会保存在 ForguncyDataValidationInfo类型的属性中，此类型的各个字段的意思分别是：

属性名	说明	类型
NumberType	数据验证的类型	ForguncyDataValidationType 枚举类型
CompareParamType	比较参数的类型，包括介于、等于、包含等等	ForguncyCompareParamType 枚举类型
FirstParamValue	第一个参数验证的值	对象类型，可以被解析为 Formula
SecondParamValue	第二个参数校验的值，如果是单值校验，则此值无意义	对象类型，可以被解析为 Formula
IgnoreBlank	是否忽略空值，如果是，则参数必填	bool 类型
ValidateCommand	校验命令列表，当校验类型为命令时才有效	Command 列表类型
ShowInputMessageWhenCellIsSelected	是否在单元格选中时显示输入信息	bool 类型
InputMessageTitle	输入信息的标题	string 类型
InputMessage	输入信息的内容	string 类型
	是否在输入无效数据后显示错误信息	bool 类型
ErrorMessage	错误信息的内容	string 类型
ErrorTo	错误消息的显示位置，仅在 IsDisplayErrorMessageTo 为 true 时才有效	ForguncyErrorTo 枚举类型，包括 Tooltips 与 Cell 中
SelectedDefaultRegularExpression	选定的默认正则表达式	string 类型

通过上述配置，您在运行时就可得到如下所示的配置对象：

INFO

{

"numberType": 2,

"compareParamType": 0,

"firstParamValue": "1",

"secondParamValue": "2",

"ignoreBlank": true,

"inCellDropdown": true,

"showInputMessageWhenCellIsSelected": true,

"inputMessageTitle": "输入标题",

"inputMessage": "输入信息",

"errorMessage": "验证出错的提示信息",

"errorTo": 0

}

运行时调用

在运行时，您需要将上述设置时的参数自行解析为前端的验证功能，在前端接口中，我们在 Forguncy.Plugin.CellTypeBase 基类上提供了 **getValidateResult**** **方法来解析验证结果。

如下是一个使用此功能的一个简单示例，示例以一个简单的表格单元格demo作为自定义的单元格类型，用来向您展示如何使用上述方法实现一个完整的验证流程：

class TestTableCellType extends Forguncy.Plugin.CellTypeBase {
    createContent(): JQuery {
        const cellParam = this.CellElement.CellType as TestTableCellTypeParam;
        const columns = cellParam.columns;

        // 为了测试默认读取第一个列配置的数据验证信息
        const dataValidation = columns[0].dataValidation;

        // 调用 getValidateResult 方法进行数据验证
        this.getValidateResult(columns[0].value, dataValidation)
            .then(result => {
                // 根据验证结果设置 div 的颜色和内容
                if (result.isValid) {
                    $("#testDiv").css("color", "Green").html("验证通过");
                } else {
                    $("#testDiv").css("color", "Red").html(result.errorMessage);
                }
        });

        // 创建一个div元素用来展示 CellType 的主体内容
        const div = $("<div id='testDiv'>" + "TestTableCellType" + "<div>")
        // CelLType 默认为 蓝色
        div.css("color", "Blue");

        return div;
    }
}

/**
 * 自定义的单元格类型参数
 */
interface TestTableCellTypeParam {
    /**
     * 列配置
     */
    columns: TestTableColumnConfig[]
}

/**
 * 自定义的表格列配置
 */
interface TestTableColumnConfig {
    /**
     * 列名
     */
    name: string,

    /**
     * 列值
     */
    value: string,

    /**
     * 数据验证信息
     */
    dataValidation: Forguncy.Plugin.ForguncyDataValidationInfo
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Test.TestTableCellType, Test", TestTableCellType);

上述代码中创建一个简单的表格单元格类型，在构建时调用了数据校验的方法 getValidateResult。

下图是使用整数校验效果：

除了普通的整数校验从上述配置中可以看到还支持其他类型的校验规则，下图是一个使用命令校验的示例，示例中配置了一个输入值小于 100 的校验规则：

您可以按照自己的业务场景，自定义校验逻辑。

需要注意的点：

1. 数据验证设置的属性必须为 ForguncyDataValidationInfo类型
2. 运行时的参数是以小驼峰的形式传递的
3. 此特性为 10.0.100.0 版本新增

更新: 2024-09-10 12:00:11
原文: https://www.yuque.com/robert-bh51n/ea8l6c/rcsecri59g6he2tq