Vaadin：如何为Binder触发的错误提示组件添加图标？

问题说明 #

我想为Vaadin中由Binder触发的错误提示组件添加图标，当前的字段校验Java代码如下：

TextField usernameField = new TextField();

binder.forField(usernameField)
    .asRequired("Please fill this field")
    .withValidator(s -> s.length() > 3, "Username must contain at least 4 characters")
    .withValidator(s -> s.length() < 12, "Username must contain less than 12 characters")
    .bind(User::getUsername, User::setUsername);

实际效果：错误提示仅显示纯文本内容，无图标。
期望效果：错误提示前添加对应图标，且能区分黄色警告和红色错误的图标颜色。

我找到一种临时解决方法，但存在局限性——需要使用.png格式的错误图片，且无法设置图标颜色来区分警告和错误，CSS代码如下：

vaadin-text-field::part(error-message)::before {
    content: url('/icons/error-icon.jpg');
    margin-right: 4px;
    width: 16px;
    height: 16px;
    display: inline-block;
}

更原生的实现方案 #

方案1：利用Vaadin Icons实现带颜色的图标提示 #

Vaadin内置了矢量图标库，支持通过CSS修改颜色，完美解决区分错误/警告的需求：

1.1 CSS代码

/* 红色错误图标 */
vaadin-text-field[invalid]::part(error-message)::before {
    content: '\e000'; /* Vaadin错误图标的Unicode编码，可替换为其他图标 */
    font-family: 'vaadin-icons';
    color: var(--lumo-error-color);
    margin-right: 4px;
    font-size: 16px;
}

/* 黄色警告图标（配合自定义样式类使用） */
vaadin-text-field.warning::part(error-message)::before {
    content: '\e002'; /* Vaadin警告图标的Unicode编码 */
    font-family: 'vaadin-icons';
    color: var(--lumo-warning-color);
    margin-right: 4px;
    font-size: 16px;
}

1.2 Java代码配合警告状态

对于需要标记为警告的校验，通过ValidationResult.createWarning()创建警告结果，并添加样式类：

binder.forField(usernameField)
    // 示例：添加警告级别的校验规则
    .withValidator(s -> !s.contains("test"), 
        "Username should not contain 'test' (warning)", 
        ValidationResult.createWarning("Username should not contain 'test'"))
    // 监听校验状态，添加/移除警告样式类
    .withValidationStatusHandler(status -> {
        if (status.isWarning()) {
            usernameField.addClassName("warning");
        } else {
            usernameField.removeClassName("warning");
        }
    })
    .bind(User::getUsername, User::setUsername);

方案2：自定义错误提示组件（组件级原生实现） #

如果需要更灵活的布局控制，可以通过Binder的状态处理器自定义错误提示组件：

// 为Binder设置全局状态处理器
binder.setStatusHandler(status -> {
    status.getFieldValidationErrors().forEach(error -> {
        if (error.getField() instanceof TextField textField) {
            // 清除原有错误消息
            textField.setErrorMessage(null);
            
            // 构建带图标的错误提示布局
            HorizontalLayout errorLayout = new HorizontalLayout();
            errorLayout.setAlignItems(Alignment.CENTER);
            errorLayout.setSpacing(true);
            
            Icon icon;
            ValidationResult result = error.getResult();
            if (result.isError()) {
                icon = VaadinIcon.EXCLAMATION_CIRCLE.create();
                icon.setColor("var(--lumo-error-color)");
            } else if (result.isWarning()) {
                icon = VaadinIcon.EXCLAMATION_TRIANGLE.create();
                icon.setColor("var(--lumo-warning-color)");
            } else {
                return;
            }
            
            icon.setSize("16px");
            errorLayout.add(icon);
            errorLayout.add(new Label(result.getMessage()));
            
            // 设置自定义错误提示组件
            textField.setErrorMessage(errorLayout);
        }
    });
});

注：该方案要求Vaadin版本支持将自定义组件设置为错误消息（Vaadin 14+大部分版本支持）。

内容的提问来源于stack exchange，提问作者AleXeNoN