JavaScript 确认密码验证

在本章中，我们将讨论使用 JavaScript 进行密码验证。每当用户在任何网站或应用程序上创建帐户时，我们都需要验证密码。因此，我们必须验证一个有效的密码，并进行确认密码验证。对于有效密码，必须包含以下参数才能使其有效 -

• 密码应为字母数字。
• 密码的第一个字母应为大写。
• 密码必须包含特殊字符（@、$、!、& 等）。
• 密码长度必须大于 8 个字符。
• 最重要的一点是密码字段不能为空。

每当用户创建密码时，总会有一个确认密码字段。它会检查用户输入的密码是否与此确认密码字段相同。要创建有效密码，两个密码字段的值必须匹配。

首先，我们将检查有效密码，然后进行确认密码验证。

有效密码验证

在此示例中，我们将检查用户创建的密码是否有效，并与上面讨论的所有参数匹配。有关密码验证的代码，请参阅下面的代码。

复制代码

输出 1

将密码字段留空时的输出。

输出 2

输入有效密码时的输出。

注意：在上面的截图中，您可能已经注意到密码对所有人可见，因为我们使用了 input type=text。如果您希望在输入密码时密码不可见，请在您的 HTML 表单 中使用 input type=password。

确认密码验证

在此示例中，我们将通过验证用户输入的两个密码是否相同来验证密码。此过程将在表单加载之前使用 JavaScript 在客户端完成。

复制代码

输出

首先，我们将为密码和确认密码字段输入不同的值。一个警告框将弹出，显示消息：密码不匹配。请参阅下面的输出

这次，我们将为密码和确认密码字段输入相同的值，以验证验证代码是否正常工作。一个警告框将弹出，显示消息：密码创建成功。请参阅下面的输出

请注意，我们在表单中还使用了一个“重置”按钮来清除用户输入的数据。

带有密码验证的完整表单

在上面的示例中，您已经学会了如何验证有效密码和确认密码。现在，我们将把这两种验证放在一个表单中以完成密码验证过程。

为此，我们将创建一个简单的基本注册表单，其中包含一些字段，例如名字、姓氏、创建密码和确认密码。带有星号（*）的字段是必填字段，用户必须提供一些值。我们将在此表单中进行以下验证以验证密码：

• 空字段验证
• 最小密码长度验证，即 > 8
• 最大密码长度验证，即 <15
• 确认密码验证

除此之外，我们还放置了一个“重置”按钮来清除表单中的字段数据。当您单击此“重置”按钮时，用户在字段中提供的所有数据都将被清除。现在，请参阅下面的代码

复制代码

输出

执行上述代码将在 Web 上显示一个 HTML 表单。在此，在文本字段中提供数据，然后单击“提交”按钮进行处理。根据验证，如果数据正确，将弹出一个警告框，显示消息：您的密码创建成功。在此，当您单击“确定”按钮时，它将转到另一个输出。

截图 1

当您单击警告框中的“确定”按钮时，它将转到一个简单的 HTML 输出，显示消息表单数据已成功提交。

截图 2

提供错误条目时的输出

如果您输入了错误的值或留空了任何必填字段，则会在输入框的右侧显示错误。这些错误将在每次单击“提交”按钮并经过验证检查后逐一显示。请参阅下面的截图中的错误

要检查所有验证是否正常工作，请复制代码并在 JavaScript 编译器中执行。