JavaScript密码强度效果实例
Posted 伴月阁
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript密码强度效果实例相关的知识,希望对你有一定的参考价值。
---恢复内容开始---
html代码
<input type="text" type="password" id="ipt"> <br> <br> <br> <h2>密码强度</h2> <span></span> <span></span> <span></span>
CSS代码
input{ width: 400px; height: 50px; font-size: 22px; } span{ display: inline-block; width: 100px; height: 25px; border: 1px solid #333; }
//获得密码框 let ipt=document.querySelector(‘#ipt‘); ipt.onkeyup=function(){ let val=ipt.value; //获取输入的值 let numReg=RegExp(/[0-9]/); //判断是否存在数字 let aaaReg=RegExp(/[a-z]/); //判断是否存在小写字符 let AAAReg=RegExp(/[A-Z]/); //判断是否存在大写字符 //正则判断 let num,aaa,AAA; numReg.test(val) ? num=true : num=false; aaaReg.test(val) ? aaa=true : aaa=false; AAAReg.test(val) ? AAA=true : AAA=false; //将结果做成一个数组 let result=[num,aaa,AAA]; let len=result.length; //定义有几种类型 let type=0; for(let i=0;i<len;i++){ if(result[i]){ type++; } } //渲染span let span=document.getElementsByTagName(‘span‘); span[type-1].style.backgroundColor="#ff6600"; }
思路 就是根据正则来判断是否存在某些字符。。。页面不美观 请担待 第一次写
---恢复内容结束---
以上是关于JavaScript密码强度效果实例的主要内容,如果未能解决你的问题,请参考以下文章