专栏首页算法与编程之美网页|含有密码强度的注册页面

网页|含有密码强度的注册页面

问题描述

随着互联网科技的迅速发展,人们对于互联网的依赖性却来越强。各种账号密码出现在人们生活的方方面面。为了提高密码的安全性,很多人都会设置一些复杂的密码。有的网站、app在用户注册的时候也会显示密码的破译困难等级,以此来提醒客户设置更加复杂的密码。如下图所示,就是我们常见的提示密码强度的效果:

图1.1 显示效果

解决方案

密码强度提示效果很明显需要用到css样式以及js进行进一部的设置。我们今天要实现的效果大概如图2.1所示。

图2.1 最终效果

整个页面中的重点就是右侧的用户登录部分。但是这个部分其实也不是太难,表单框架用form表单就可以完成,其他的内容也就不一一介绍了。这里唯一需要详细介绍的应该就是今天的密码强度提示效果了。密码强度提示主要是通过匹配数字,字母以及匹配除数字字母外的特殊符号来实现的。这里我们就需要用到css来进行匹配,相关的代码如下:

<script type="text/javascript"> function CheckIntensity(pwd) { var Mcolor, Wcolor, Scolor, Color_Html; var m = 0; //匹配数字 if (/\d+/.test(pwd)) { debugger; m++; }; //匹配字母 if (/[A-Za-z]+/.test(pwd)) { m++; }; //匹配除数字字母外的特殊符号 if (/[^0-9a-zA-Z]+/.test(pwd)) { m++; }; if (pwd.length <= 6) { m = 1; } if (pwd.length <= 0) { m = 0; } switch (m) { case 1: Wcolor = "pwd pwd_Weak_c"; Mcolor = "pwd pwd_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "弱"; break; case 2: Wcolor = "pwd pwd_Medium_c"; Mcolor = "pwd pwd_Medium_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "中"; break; case 3: Wcolor = "pwd pwd_Strong_c"; Mcolor = "pwd pwd_Strong_c"; Scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; Color_Html = "强"; break; default: Wcolor = "pwd pwd_c"; Mcolor = "pwd pwd_c pwd_f"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "无"; break; } document.getElementById('pwd_Weak').className = Wcolor; document.getElementById('pwd_Medium').className = Mcolor; document.getElementById('pwd_Strong').className = Scolor; document.getElementById('pwd_Medium').innerHTML = Color_Html; } </script>

对于上述代码,其中debugger 语句用于停止执行 JavaScript,并调用 (如果可用) 调试函数。使用 debugger 语句类似于在代码中设置断点。

上面的代码是这样执行的,首先遍历并找到匹配的 case,如果没有匹配(我们这个例子就是没有匹配的)则执行 default,但此时 default 中不存在 break,所以程序又沿着代码继续往下走了。

此外,在匹配过程中我们还用到了正则表达式——/[^0-9a-zA-Z]+/。js正则是在双正斜杠之中起作用的。其中方括号表示范围,^有非的意思。如:[1233]查找方括号之间的任何字符,而[^1233]则表示查找任何不在方括号之间的字符。相关具体内容参考下图:

图2.2 js进阶正则表达式

结语

在实现这个含有显示密码强度的页面过程中,调试各各部分的位置花了很多时间。特别是密码强度显示条的位置最开始一直在尝试使用外链css样式进行调试,但是一直都没有任何效果,最后还是用行内样式进行设置才起了作用。关于这一点还有些疑问,对于外链样式和行内样式的设置可能还有点问题。

END

实习编辑 | 王楠岚

责 编 | 刘 连

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:刘连

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 深入理解遗传算法(三)

    已知N元一次方程y = w1x1 + w2x2 + w3x3 + w4x4 + w5x5 + w6x6

    算法与编程之美
  • socket服务部署到服务端后启动失败Cannot assign requested address: bind 的总结

    https://blog.csdn.net/asd1098626303/article/details/79141315

    算法与编程之美
  • 聊一聊序列化和反序列化

    第一行导入了需要使用的第三方库pickle;第二行定义了一个字典变量student,保存了这个学生的姓名、年龄和性别;第三行是代码的主体部分表示的是以二进制写的...

    算法与编程之美
  • 轻松掌握 Linux 命令(3):pwd 命令

    花下猫语:熟练使用 Linux 系统绝对是程序员在职场的加分项,而 Linux 命令则是其中的关键。为了扩充本公众号的知识面,也为了自己能更加熟练地掌握 Lin...

    Python猫
  • CTF---Web入门第六题 因缺思汀的绕过

    因缺思汀的绕过分值:20 来源: pcat 难度:中 参与人数:6479人 Get Flag:2002人 答题人数:2197人 解题通过率:91% 访问...

    Angel_Kitty
  • 做性能管理,为什么会在2B领域受到创投热捧?

    万众创业时代,移动互联网、智能硬件、O2O这些领域涌入成千上万的创业大军时,还有一个领域鲜有人关注:企业级市场。消费级互联网市场进入红海,而企业级市场迎来春天,...

    罗超频道
  • 数据库_mysq单表操作

    1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER ...

    Java学习
  • 【Leetcode 70】关关的刷题日记68 – Leetcode 70 Climbing Stairs

    关关的刷题日记68 – Leetcode 70 Climbing Stairs 题目 You are climbing a stair case. It tak...

    WZEARW
  • Python数据分析(5)-numpy数组索引

    numpy数组的索引遵循python中x[obj]模式,也就是通过下标来索引对应位置的元素。在numpy数组索引中,以下问题需要主要: 1)对于单个元素索引...

    锦小年
  • Linux平台oracle 11g单实例 + ASM存储 安装部署

    操作环境:Citrix虚拟化环境中申请一个Linux6.4主机(模板) 目标:创建单机11g + ASM存储 数据库

    Alfred Zhao

扫码关注云+社区

领取腾讯云代金券