emailField 电子邮件字段

emailField 是一个标准的 textField，但是只能输入电子邮件地址。

XML 元素

emailField

Java 类

JmixEmailField

基本用法

在线示例

emailField 组件是输入和验证电子邮件地址的特殊输入控件。扩展于基础的 textField 组件，添加了与电子邮件地址相关的功能和验证。

emailField 的示例：

<emailField id="emailField" label="EmailField"/>

数据感知的 emailField

在线示例

数据绑定是指将组件与 数据容器 进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息，请参阅 使用数据组件。

下面的示例生成了一个数据感知的 emailField。

<data>
    <instance id="customerDc"
              class="io.jmix.uisamples.entity.Customer"
              fetchPlan="_local"/>
</data>
<layout>
    <emailField id="emailField" label="Field connected to a container" width="15em"
                     dataContainer="customerDc" property="email"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

customerDc 实例容器中包含了 Customer 实体。dataContainer 和 property 属性将组件与实体的 email 属性绑定。

验证

如需检查组件内输入的值，请添加一个 validator 元素。

支持以下预定义验证器：

XML 元素

validators

预定义验证器

custom - email - notBlank - notEmpty - notNull - regexp - size

样式版本

在线示例

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

small

组件尺寸较小

Aura, Lumo

align-left

字段值左对齐

Aura, Lumo

align-center

字段值居中

Aura, Lumo

align-right

字段值右对齐

Aura, Lumo

helper-above-field

帮助文字显示在字段上方，标题下方。

Aura, Lumo

XML 属性

下面是 emailField 的特殊属性：

名称 描述 默认值

autoselect

设置当组件获得焦点时，是否自动选中文本。

—

clearButtonVisible

设置是否显示一个清除按钮。

false

下面是 emailField 支持的其他通用属性：

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autocapitalize - autocomplete - autocorrect - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxLength - maxWidth - minHeight - minLength - minWidth - pattern - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - title - value - valueChangeMode - valueChangeTimeout - visible - width

事件和处理器

下面是 emailField 的特殊事件和处理器：

名称 描述

validator

验证组件的值。

下面是 emailField 支持的其他通用事件：

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler

XML 内部元素

一个 emailField 可以包含 prefix、suffix、tooltip 和 validator 作为其内部元素。

参考