JavaScript에서 비밀번호 강도를 동적으로 확인하는 구현 방법

일반적으로 일부 웹사이트의 등록 페이지나 비밀번호 변경 페이지에서 비밀번호를 입력할 때 사용자에게 비밀번호 강도를 입력하라는 메시지를 표시하는 진행률 표시줄과 유사한 긴 표시줄이 나타나는 것을 볼 수 있습니다. 아래와 같이:

어떤 사람들은 여러 다른 그림으로 바꾸는 것을 보았습니다. 효과가 있는 것처럼 보이지만 그다지 좋지는 않습니다. 그래서 다른 방법으로 해요.

기본적으로 이는 사용자가 입력한 다양한 비밀번호 강도에 따라 색상 영역의 길이를 변경합니다.

비밀번호 강도 가로 막대는 기본적으로 div입니다. 다른 태그도 사용할 수 있습니다. div 내부에는 범위의 길이와 색상을 변경하여 비밀번호 강도를 표현합니다. 원리는 매우 간단하지만, 작동 중에 몇 가지 귀찮은 문제가 발생할 수 있습니다.

1. 먼저 html 페이지에서 비밀번호를 입력하기 위한 입력 상자를 한 번에 하나씩 정의하고 div 안에 스팬 태그를 넣고 해당 속성, 유형, 이름, 값, 클래스, ID를 설정합니다. 등

<font color="#FF0000">*</font>密码：<input type="text" name="password" id="password" value="请输入密码" onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">不少于6位字符</font><br/>

2 비밀번호 강도:

<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2 . 태그의 스타일을 제어하여 더욱 아름답게 느껴지도록 해당 CSS를 설정합니다.

<style type="text/css">
/*用于修饰密码强度条外边框div*/
.pwdStrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/*用于设置span标签的初始样式*/
.cinnerprogress{
display: block;
height: 100%;
background-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四个将用于设置span标签在不同密码强度的样式*/
.strengthLv1{
display: block;
height: 100%;
border-radius: 5px;
background:red;width:25%;}
.strengthLv2{
display: block;
height: 100%;
border-radius: 5px;
background:orange;width:50%;}
.strengthLv3{
display: block;
height: 100%;
border-radius: 5px;
background:#09F;width:75%;}
.strengthLv4{
display: block;
height: 100%;
border-radius: 5px;
background:green;width:100%;}
</style>

3. 감지할 해당 JavaScript 메서드를 작성합니다. 사용자가 입력한 비밀번호 강도는 비밀번호 강도를 표현하기 위해 다양한 스타일을 호출합니다. 비밀번호 강도의 규칙은 onblur(포커스 상실) 이벤트와 onkeyup(키보드를 누른 후) 이벤트에서 다음 메소드를 호출하기만 하면 됩니다. 비밀번호 입력란:

function pwdComplex()//用于判断密码强度的
{
var pwdobj=document.getElementById("password"); //获取密码输入框对象
var pwdTip=document.getElementById("pwdTip");//获取密码提示文字对象
var pwdprogress=document.getElementById("innerprogress"); //获取span标签对象
var strongthTip=document.getElementById("strongthTip");//获取密码强度提示文字的对象
var regxs = new Array();//定义一个数组用于存放不同的正则表达式
regxs[0]=/[^a-zA-Z0-9_]/g;
regxs[1]=/[a-z]/g;
regxs[2]=/[0-9]/g;
regxs[3]=/[A-Z]/g;
var val = pwdobj.value;//获取用户输入的密码
var len = val.length;//获取用户输入的密码长度
var sec = 0; //定义一个变量用于存放密码强度
if (len >= 6) //用于判断用户输入的密码强度
{ // 至少六个字符
for (var i = 0; i < regxs.length; i++) //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合则强度+1
{
if (val.match(regxs[i]))
{
sec++;
}
}
}
if(sec==0) //通过不同的密码强度调用不同的样式
{
strongthTip.innerText="";
//setAttribute("class", "className")中class是指改变class这个属性，所以要带引号，className是span标签的类名，也是对应的样式名
pwdprogress.setAttribute("class","cinnerprogress");
}
else if(sec==1)
{
strongthTip.innerText="强度：弱";
strongthTip.style.color="red";
pwdprogress.setAttribute("class","strengthLv1");
}
else if(sec==2)
{
strongthTip.innerText="强度：中";
strongthTip.style.color="orange";
pwdprogress.setAttribute("class","strengthLv2");
}
else if(sec==3)
{
strongthTip.innerText="强度：强";
strongthTip.style.color="#09F";
pwdprogress.setAttribute("class","strengthLv3");
}
else if(sec==4)
{
strongthTip.innerText="强度：超强";
strongthTip.style.color="green";
pwdprogress.setAttribute("class","strengthLv4");
}
}