跳至主要内容

PasswordField

在 ChatGPT 中打开
阴影 dwc-field 23.02
Java API

PasswordField 组件允许用户安全地输入密码。它显示为单行文本编辑器，输入的文本被模糊处理，通常用符号如星号 ("*") 或点 ("•") 替换。具体的符号可能根据浏览器和操作系统而有所不同。

使用 PasswordField​

Inheritance

This class is a Field component, and inherits its features and behaviors. For an overview of Field properties, events, and other important information, please refer to the Field documentation.

PasswordField 扩展了共享的 Field 类，提供了所有字段组件的公共功能。以下示例创建一个带有标签和占位符文本的 PasswordField。

显示代码

字段值​

PasswordField 组件将其值存储和检索为普通的 String，类似于 TextField，但视觉效果是模糊的，以隐藏字符。

您可以使用以下方式检索当前值：

passwordField.getValue();
敏感数据

尽管字段在视觉上掩盖了内容，但从 getValue() 返回的值仍然是普通字符串。在处理敏感数据时请注意这一点，并在存储之前进行加密或转换。

要以编程方式设置或重置值：

passwordField.setValue("MySecret123!");

如果用户未输入任何值且未设置默认值，字段将返回一个空字符串 ("")。

此行为模拟了原生 HTML <input type="password"> 的行为，其中 value 属性保存当前输入。

用法​

PasswordField 最适合用于捕获或处理敏感信息的场景，例如密码或其他机密数据，这对您的应用至关重要。以下是使用 PasswordField 的一些示例：

  1. 用户认证和注册：密码字段在涉及用户认证或注册流程的应用中至关重要，要求安全的密码输入。

  2. 安全表单输入：在设计需要输入敏感信息的表单时，例如信用卡详情或个人识别号码 (PIN)，使用 PasswordField 可确保此类数据的安全输入。

  3. 帐户管理和个人设置：密码字段在涉及帐户管理或个人设置的应用中非常有价值，允许用户安全地更改或更新他们的密码。

密码可见性​

用户可以通过点击显示图标来显示 PasswordField 的值。这使得用户能够验证他们输入的内容，或将信息复制到剪贴板。然而，对于高安全环境，您可以使用 setPasswordReveal() 删除显示图标，并防止用户看到值。您可以使用 isPasswordReveal() 方法验证用户是否可以使用显示图标来展示值。

模式匹配​

强烈建议使用 setPattern() 方法对 PasswordField 应用正则表达式模式。这允许您强制执行字符规则和结构要求，迫使用户创建安全且合规的凭据。模式匹配在强制执行强密码规则时尤其有用，例如要求混合使用大写字母和小写字母、数字和符号。

模式必须遵循 JavaScript 正则表达式 的语法，由浏览器解释。内部使用 u（Unicode）标志以确保所有 Unicode 代码点的验证。请勿在模式周围包含斜杠 (/)。

在以下代码片段中，模式要求至少有一个小写字母、一个大写字母、一个数字，以及最少 8 个字符的长度。

passwordField.setPattern("(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,}");

如果缺少模式或模式无效，则不会应用验证。

提示

使用 setLabel() 提供清晰的标签，描述密码字段的用途。为了帮助用户理解密码要求，使用 setHelperText() 在字段下方直接显示指导或规则。

最小和最大长度​

您可以通过在 PasswordField 上使用 setMinLength() 和 setMaxLength() 来控制密码输入的允许长度。

setMinLength() 方法定义用户必须在字段中输入的字符的最小数量，以通过验证。该值必须是非负整数，并且在设置最大长度的情况下不得超过最大长度。

passwordField.setMinLength(8); // 最少 8 个字符

如果用户输入的字符少于最小值，则输入将失败约束验证。该验证仅在用户修改字段值时应用。

setMaxLength() 方法设置字段中允许的最大字符数。该值必须是 0 或更大。如果未定义或设置为无效值，则该字段没有上限。

passwordField.setMaxLength(20); // 最多 20 个字符

如果输入超过了最大字符限制，字段将失败约束验证。与最小值一样，此规则仅在用户更新字段值时应用。

提示

结合使用 setMinLength() 和 setMaxLength() 来创建有效的输入边界。有关更多参考，请参见 HTML 长度约束文档。

最佳实践​

由于 PasswordField 组件通常与敏感信息相关，请考虑在使用 PasswordField 时遵循以下最佳实践：

  • 提供密码强度反馈：整合密码强度指示器或反馈机制，帮助用户创建强大且安全的密码。评估长度、复杂性及大小写字母、数字和特殊字符的混合等因素。

  • 强制密码存储：绝不要以明文方式存储密码。相反，实施适当的安全措施以安全地处理和存储应用中的密码。对密码和其他敏感数据使用行业标准的加密算法。

  • 密码确认：当用户更改或创建密码时，包含额外的确认字段。这种措施有助于降低误输入的可能性，并确保用户准确输入他们所需的密码。

  • 允许密码重置：如果您的应用涉及用户帐户，请提供用户重置密码的选项。这可以形成“忘记密码”功能，启动密码恢复流程。

  • 可访问性：设置 PasswordField 时考虑可访问性，以使其符合可访问性标准，例如提供适当的标签，并与辅助技术兼容。