JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了JavaScript注册时密码强度校验代码大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

密码强度有4个状态,分别如下图。

无密码状态

JavaScript注册时密码强度校验代码

密码低级状态

JavaScript注册时密码强度校验代码

密码中级状态

JavaScript注册时密码强度校验代码

密码高级状态

JavaScript注册时密码强度校验代码

实现的代码主要如下:

HTML代码

password" type="password" onKeyUp="checkIntensity(this.value)"> LPADding="0" cellspacing="0">

CSS代码

{width:50px;height:20px;line-height:14px;padding-top:2px;} .pwd_f{Color:#bbbbBB;} .pwd_c{BACkground-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} .pwd_Weak_c{BACkground-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} .pwd_Medium_c{BACkground-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} .pwd_h3_c{BACkground-color:#3ABB1c;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} .pwd_c_r{Border-right:1px solid #D0D0D0;} .pwd_Weak_c_r{Border-right:1px solid #BB2B2B;} .pwd_Medium_c_r{Border-right:1px solid #E9AE10;} .pwd_h3_c_r{Border-right:1px solid #267A12;}

JS代码

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_h3_c";
    Mcolor = "pwd pwd_h3_c";
    Scolor = "pwd pwd_h3_c pwd_h3_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_h3').className = Scolor;
document.getElementById('pwd_Medium').innerHTML = Color_Html;

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。

大佬总结

以上是大佬教程为你收集整理的JavaScript注册时密码强度校验代码全部内容,希望文章能够帮你解决JavaScript注册时密码强度校验代码所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。