怎样用js实现判断密码的强弱效果?
Admin 2021-08-20 群英技术资讯 553 次浏览
怎样用js实现判断密码的强弱效果?我们在注册账号的时候,为了提高账号的安全性,很多注册业务都会设计密码的强弱显示,那么这一效果是怎样实现的呢?下面我们一起来看看。
密码强弱度分析
密码由数字,字母,特殊符号组成
版本一:基本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #dv{ width: 300px; height:200px; position: absolute; left:100px; top:100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div id="dv"> <label for="password">密码</label> <input type="text" id="password" maxlength="16"> <div> <b>密码强度:</b> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <script> function my$(id) { return document.getElementById(id); } <script> //获取文本框注册键盘抬起事件 my$("password").onkeyup=function () { //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色 //如果密码的长度是小于6的,没有必要判断 if(this.value.length>=6){ var lvl=getLvl(this.value); if(lvl==1){ //弱 my$("strengthLevel").className="strengthLv1"; }else if(lvl==2){ my$("strengthLevel").className="strengthLv2"; }else if(lvl==3){ my$("strengthLevel").className="strengthLv3"; }else{ my$("strengthLevel").className="strengthLv0"; } }else{ my$("strengthLevel").className="strengthLv0"; } }; //给我密码,我返回对应的级别 function getLvl(password) { var lvl=0;//默认是0级 //密码中是否有数字,或者是字母,或者是特殊符号 if(/[0-9]/.test(password)){ lvl++; } //判断密码中有没有字母 if(/[a-zA-Z]/.test(password)){ lvl++; } //判断密码中有没有特殊符号 if(/[^0-9a-zA-Z_]/.test(password)){ lvl++; } return lvl;//1 3 } </script> </body> </html>
上面代码有点冗余,我们对其进行升级改写
版本二:升级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> #dv{ width: 300px; height:200px; position: absolute; left:100px; top:100px; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } </style> <body> <div id="dv"> <label for="password">密码</label> <input type="text" id="password" maxlength="16"><!--课外话题--> <div> <b>密码强度:</b> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div> </div> <!-- <script src="common.js"></script> --> <script> function my$(id) { return document.getElementById(id); } //获取文本框注册键盘抬起事件 my$("password").onkeyup=function () { //每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色 my$("strengthLevel").className="strengthLv"+(this.value.length>=6?getLvl(this.value) :0); }; //给我密码,我返回对应的级别 function getLvl(password) { var lvl=0;//默认是0级 //密码中是否有数字,或者是字母,或者是特殊符号 if(/[0-9]/.test(password)){ lvl++; } //判断密码中有没有字母 if(/[a-zA-Z]/.test(password)){ lvl++; } //判断密码中有没有特殊符号 if(/[^0-9a-zA-Z_]/.test(password)){ lvl++; } return lvl;//最小的值是1,最大值是3 } </script> </body> </html>
以上就是关于js判断密码的强弱的方法介绍,希望本文对大家学习js有帮助,想要了解更多实现判断密码的强弱的方法,大家可以关注其他相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章我们来了解JavaScript中类型转换的方法,JavaScript中类型转换有显式类型转换和隐式类型转换这两种,下面我们来详细的了解一下这两种类型转换及具体的试下,感兴趣的朋友就继续往下看吧。
目录1. 自定义组件官方文档1.1 创建自定义组件1.1.1 声明组件1.1.2 编辑组件1.2 使用自定义组件1.3 页面向自定义组件传递数据(父传子)1.4 组件将事件传给页面(子传父)1. 自定义组件小程序允许我们使用自定义组件的方式来构建页面。官方文档自定义组件是不是用的微信的组件感觉很爽啊,如果不够用怎么办?
这篇文章主要为大家详细介绍了原生JS实现呼吸轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了vue模板配置与webstorm代码格式规范设置详细的相关资料,需要的朋友可以参考一下文章得具体内容,希望对你有所帮助
目录前言问题记录路由守卫的应用动态路由实现权限控制hash模式的路由参数被干扰跳转同组件路由,不刷新?总结前言本文记录vue2的vue-router在使用过程中遇到的一些问题。问题记录路由守卫的应用根据路由守卫绑定的位置不同,有下面三种路由守卫全局守卫beforeEach/beforeResolve/afterEach
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008