emailField 电子邮件字段

基本用法

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

emailField 的示例：

<emailField errorMessage="Enter a valid email address"
            value="john.doe@email.com"
            clearButtonVisible="true"
            label="Email address"
            width="15em"/>
email field basics

数据绑定

在线示例

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

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

<data>
    <instance class="com.company.onboarding.entity.Customer" id="customerDc"> (1)
        <fetchPlan extends="_base"/> (2)
        <loader id="customerDl"/>
    </instance>
</data>
<layout>
    <emailField dataContainer="customerDc"
                property="email"
                label="Email"/> (3)
</layout>
1 Customer 实体的 InstanceContainer 容器。
2 容器内实体的内联 fetch plan。
3 将组件与数据容器和属性进行关联。dataContainer 属性使用 customerDc 数据容器，property 引用 email 实体属性。

样式版本

在线示例

使用 themeNames 属性可以设置 emailField 的预定义不同样式。

emailField 有几个样式版本：

  • small

  • align-left

  • align-center

  • align-right

  • helper-above-field

用法和示例请参考 textField 组件的 相应章节。

验证

如需检查 emailField 组件输入的值，可以在内部元素 validators 中添加一个 validator元素。

emailField 可以使用下列预定义的验证器：

XML 元素

validators

预定义验证器

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

参考

Vaadin 文档