js密码强度实时检测码

在注册网站用户时，密码强度的判断是必不可少的。不同的网站有不同的实现方式。密码的判断其实是验证的形式之一。让我们实现这样一个简单的操作。

首先，制作一个简单的密码输入框和一个显示密码强度的进度条。整个箱子都被vali_pass箱子盖住了。此框包含标题和密码框。然后是力量进度条。

Class=' vali _ pass' h3简单密码强度测试/h3输入类型=' pass ' name=' pass ' div class=' vali _ pass _ progress ' span class=' vali _ pass _ inner _ progress '/span/div/div这样我们就可以用CSS美化一下了。vali _ pass { width: 350pxmargin: 0 autopadding: 10pxborder: #eee 1px固体；文本对齐：中心；}.vali_pass输入{ width : 96%；display:块；margin : 0；padding: 5pxfont-size : 14px；线高： 20px；}.vali _ pass _ progress { margin-top : 10px；背景-color : # EFE fef；height: 10pxborder-radius : 5px；}.vali _ pass _ inner _ progress { display : }块；高度： 100%；背景色-:透明；border-radius : 5px；宽度： 100%；}我们此时需要考虑的是，这个进度条中可能有几种状态，度数低的时候显示哪些状态，度数中的时候显示哪些状态，度数高的时候显示哪些状态。好的，我们在这里使用的时候，进度条里面的框的宽度和背景色的控制设置为三种样式。错误{背景色： # ff 3300；}.中间{背景-color:金色；}.强{背景色-color:绿色；}有了这个HTML结构，CSS美化就完成了。下面我们来做JS监控。

首先需要在密码输入框中加入文字输入监控。

ele _ pass . onkeyup=function(){ 0.}在此事件中必须处理密码的判断。但是，在处理之前，我们必须初始化一些数据，例如用于密码判断的正则表达式。

var regxs=[]；regxs.push(/[^a-za-z0-9_]/g)；regxs . push(/[a-Za-Z]/g)；regxs . push(/[0-9]/g)；这里我用三个规律依次判断密码的匹配程度。数据初始化完成后，我将处理onkeyup事件。首先，我将得到这个输入框的值，然后我们将控制它的长度至少6个字符。sec是安全度的附加值。每次匹配常客里的表情，我都会说明密码的安全程度。然后我会把它转换成密码100以内的值。该值可以方便地用于控制内部进度条的宽度。

ele _ pass . onkeyup=function(){ var val=this . value；var len=val.lengthvar sec=0；If (len=6) {//至少六个字符为(var I=0；i regxs.lengthI){ if(val . match(regxs[I]){ sec；} } } var结果=(sec/regxs . length)* 100；ele_progress.style.width=结果“%”；}进度条的宽度控制好之后，我们暂时看不到进度条的效果。看看前面的CSS代码。默认背景是透明的。然后我们要控制不同的安全值，控制他的背景颜色。下面的代码用于控制其背景颜色。

if(result 0 result=50){ ele _ progress . SetAttribute(' class '，begin _ class name ' error ')；}else if(结果50结果100){ ele _ progress . SetAttribute(' class '，begin _ class name ' middle ')；} else if(result==100){ ele _ progress . SetAttribute(' class '，begin _ class name ' strong ')；}最后一个JS代码是：

var ele _ pass=文档。getelementsbytagname(' input ')[0]；var ele _ progress=文档。getelementsbyclassname(' vali _ pass _ inner _ progress ')[0]；var begin _ class name=ele _ progress。类名；var regxs=[]；regxs.push(/[^a-za-z0-9_]/g)；正则表达式。push(/[a-Za-Z]/g)；正则表达式。push(/[0-9]/g)；埃勒帕斯。onkeyup=function(){ var val=this。价值；var len=val . length var sec=0；if (len=6) { //至少六个字符for(var I=0；i regxs.lengthI){ if(val。match(regxs[I]){ sec；} } } var结果=(秒/正则表达式。长度)* 100；ele_progress.style.width=结果"%";if(结果0结果=50){ ele _ progress。SetAttribute(' class '，begin _ class name '错误')；}else if(结果50结果100){ ele _ progress。SetAttribute(' class '，begin _ class name ' middle ')；} else if(结果==100){ ele _ progress。SetAttribute(' class '，begin _ class name ' strong ')；}}那我们的效果也来操作一下看看：

以上就是本文的全部内容，希望对大家学习爪哇岛描述语言程序设计有所帮助。