JavaScript 中的密码验证 [逐步设置说明]

任何支持身份验证和授权的网站总是通过登录要求输入用户名和密码。 如果不是这样，用户需要注册并创建密码才能登录下一个会话，因此网站倾向于提供特定的协议或参数。 以下参数通常用于任何形式的密码验证。

• 密码字段只接受字母数字输入。
• 它应该以大写字母开头。
• 至少一个大写字母密码。
• 密码应具有特定长度。
• 密码中必须使用一个数值。
• 密码必须有最小和最大长度。

JavaScript 中的密码验证可确保在用户创建密码时遵循这些参数。 必须满足给定的条件才能形成合理的强密码。 可以使用 JavaScript 代码通过正则表达式验证密码的结构。

要在密码字段中使用 JavaScript 处理密码验证，将遵循以下步骤。

Javascript中的密码验证

1. 创建 HTML 表单

表单应包含电子邮件、电话号码和密码等基本字段。 让我们看一个定义表单结构的 HTML 代码示例。

<! 文档类型html >

< html lang = “en” >

<头>

<元字符集= “UTF-8” >

<元名称= “视口”内容= “宽度=设备宽度，初始比例=1.0” >

< title >表格</ title >

</头>

<身体>

< div类= “容器” >

<表单动作= “/action_page.php” >

< label for = “usrname” >电子邮件地址</ label >

<输入类型= “文本” id = “用户名”名称= “用户名”必填>

< label for = “psw” >密码</ label >

<输入类型= “密码” id = “psw”名称= “psw”模式= “(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “必须至少包含一个数字和一个大小写字母，并且至少包含8个或更多字符”要求>

<输入类型= “提交”值= “提交” >

</表格>

</ div >

< div id = “消息” >

< h3 >密码必须包含以下内容： </ h3 >

< p id = “字母” class = “无效” > A < b >小写</ b >字母</ p >

< p id = “大写” class = “无效” > A < b >大写（大写） </ b >字母</ p >

< p id = “数字” class = “无效” > A < b >数字</ b ></ p >

< p id = "length" class = "invalid" >最少< b > 16 个字符</ b ></ p >

</ div >

</正文>

</ html >

2.添加CSS

输入{

宽度： 100% ；

填充： 12px ；

边框： 1px实心#ccc ；

边框半径： 4px ；

box-sizing :边框框;

边距顶部： 6px ；

边距底部： 16px ；

}

/* 设置提交按钮的样式 */

输入[类型=提交]{

背景颜色： #4CAF50 ；

颜色：白色；

}

/* 为输入设置容器样式 */

.容器{

背景颜色： #f1f1f1 ；

填充： 20px ；

}

#消息{

显示：无；

背景： #f1f1f1 ；

颜色： #000 ；

位置：相对；

填充： 20px ；

边距顶部： 10px ；

}

#消息p {

填充： 10 像素35 像素；

字体大小： 18px ；

}

.有效{

颜色： RGB （ 3、184、190 ） ； _ _ _

}

.有效：之前{

位置：相对；

左： -35px ；

内容： “&#10004;” ;

}

.无效{

颜色：红色；

}

.无效：之前{

位置：相对；

左： -35px ；

内容： “&#10006;” ;

}

结帐： 2021 年顶级 Javascript 框架

3.添加JavaScript

var myInput =文档。 getElementById （ “psw” ）；

var字母=文档。 getElementById （ “字母” ）；

var大写=文档。 getElementById （ “资本” ）；

变量编号=文档。 getElementById （ “数字” ）；

var长度=文档。 getElementById （ “长度” ）

我的输入。 onfocus =函数（）{

文件。 getElementById （ “消息” ）。 风格。 显示= “块” ；

}

我的输入。 onblur =函数() {

文件。 getElementById （ “消息” ）。 风格。 显示= “无” ；

}

我的输入。 onkeyup =函数() {

var lowerCaseLetters = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

信。 类列表。 删除（ “无效” ）；

信。 类列表。 添加（ “有效” ）；

}其他{

信。 类列表。 删除（ “有效” ）；

信。 类列表。 添加（ “无效” ）；

}

var upperCaseLetters = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters )) {

资本。 类列表。 删除（ “无效” ）；

资本。 类列表。 添加（ “有效” ）；

}其他{

资本。 类列表。 删除（ “有效” ）；

资本。 类列表。 添加（ “无效” ）；

}

变数= / [ 0-9 ] / g ; _

如果（我的输入。值。匹配（数字））{

号。 类列表。 删除（ “无效” ）；

号。 类列表。 添加（ “有效” ）；

}其他{

号。 类列表。 删除（ “有效” ）；

号。 类列表。 添加（ “无效” ）；

}

如果（我的输入。值。长度> = 8 ）{

长度。 类列表。 删除（ “无效” ）；

长度。 类列表。 添加（ “有效” ）；

}其他{

长度。 类列表。 删除（ “有效” ）；

长度。 类列表。 添加（ “无效” ）；

}

}

JavaScript 代码最初通过 id 获取元素； 之后，它允许它显示在屏幕上。 它还运行条件以获取给定格式的密码。 大写字母、小写字母和数字通过代码中创建的正则表达式进行验证。

4.正则表达式/REGEX

正则表达式是匹配字段中传递的原始文字组合的模式。 在密码验证中，使用 JavaScript 的正则表达式在识别字符串以及它是否为给定格式方面起着至关重要的作用。 正则表达式是 JavaScript 对象。 这些正则表达式写在 JavaScript 代码中的斜杠之间，用于密码验证。

示例：让 re=/ac-b/

如何使用正则表达式在 JavaScript 中编写密码验证？

正则表达式由简单字符和特殊字符组合而成。 正则表达式是根据强密码的参数或约束形成的。 当字符串或字符存在严格匹配时，使用特殊字符。

上面描述的 JavaScript 代码使用正则表达式来查找大写字母、小写字母和数字。 表达式由不同的序列和子序列组成。 正则表达式中使用的每个字符都有一定的规则。

示例：让数字=/[0-9]/g。 它接受 0-9 范围内的数字。

结帐： Github 中的 Javascript 项目

从世界顶级大学在线学习软件课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。

结论

密码验证至关重要，因为它允许用户创建强密码并避免任何潜在的密码破解。 使用 JavaScript，可以添加交互性并因此通知用户，直到密码以任何顺序包含所有必需的字符。 用 JavaScript 编码的正则表达式在定义序列中起着关键作用。 它将写入的参数降低到 JavaScript 代码中。

如果您有兴趣了解有关全栈开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发执行 PG 计划，该计划专为工作专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和任务, IIIT-B 校友身份，实用的实践顶点项目和顶级公司的工作协助。