文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中怎么评估用户输入密码的强度

2024-04-02 19:55

关注

这篇文章给大家介绍JavaScript中怎么评估用户输入密码的强度,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

原有代码请查看:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title> </head> <body>     <script type="text/javascript">         //CharMode函数   function CharMode(iN) {              if (iN >=48&& iN <=57) //数字  return1;              if (iN >=65&& iN <=90) //大写字母  return2;              if (iN >=97&& iN <=122) //小写  return4;              else                  return8; //特殊字符           }           //bitTotal函数   function bitTotal(num) {              modes =0;              for (i =0; i <4; i++) {                  if (num &1) modes++;                  num >>>=1;              }              return modes;          }           //checkStrong函数   function checkStrong(sPW) {              if (sPW.length <=4)                  return0; //密码太短              Modes =0;              for (i =0; i < sPW.length; i++) {                  Modes |= CharMode(sPW.charCodeAt(i));              }              return bitTotal(Modes);          }            //pwStrength函数   function pwStrength(pwd) {              O_color ="#eeeeee";              L_color ="#FF0000";              M_color ="#FF9900";              H_color ="#33CC00";              if (pwd ==null|| pwd =='') {                  Lcolor = Mcolor = Hcolor = O_color;              } else {                  S_level = checkStrong(pwd);                  switch (S_level) {                      case0:                          Lcolor = Mcolor = Hcolor = O_color;                      case1:                          Lcolor = L_color;                          Mcolor = Hcolor = O_color;                          break;                      case2:                          Lcolor = Mcolor = M_color;                          Hcolor = O_color;                          break;                      default:                          Lcolor = Mcolor = Hcolor = H_color;                  }                   document.getElementById("strength_L").style.background = Lcolor;                  document.getElementById("strength_M").style.background = Mcolor;                  document.getElementById("strength_H").style.background = Hcolor;                  return;              }          } </script>     <form name="form1" action="">     输入密码:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">     <br>     密码强度:      <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"         height="23" style='display: inline'>         <tr align="center" bgcolor="#eeeeee">             <td width="33%" id="strength_L">                 弱              </td>             <td width="33%" id="strength_M">                 中              </td>             <td width="33%" id="strength_H">                 强              </td>         </tr>     </table>     </form> </body> </html>

首先我们来改善一下上面博友的验证函数为如下代码:

var PagePage = Page || {};  PagePage.Utility = Page.Utility || {};  PagePage.Utility.Registration = Page.Utility.Registration || {};   //获取密码强度  Page.Utility.Registration.getPasswordLevel = function (password) {      if (password == null || password == '')          return 0;       if (password.length <= 4)          return 0; //密码太短       var Modes = 0;      for (i = 0; i < password.length; i++) {          Modes |= CharMode(password.charCodeAt(i));      }      return bitTotal(Modes);       //CharMode函数       function CharMode(iN) {          if (iN >= 48 && iN <= 57) //数字              return 1;          if (iN >= 65 && iN <= 90) //大写字母              return 2;          if (iN >= 97 && iN <= 122) //小写              return 4;          else              return 8; //特殊字符       }       //bitTotal函数      function bitTotal(num) {          modes = 0;          for (i = 0; i < 4; i++) {              if (num & 1) modes++;              num >>>= 1;          }          return modes;      }  };

然后来创建View Model,但是引用Knockout之前,我们首先要引用Knockout的Js类库(具体介绍请查看Knockout应用开发指南的系列教程)
View model代码如下:

var viewModel = {      Password: ko.observable(""),      Ocolor: "#eeeeee"  };

对于密码强度以及颜色的值依赖于密码字符串的值,所以我们需要为他们声明依赖属性,代码如下:

viewModel.PasswordLevel = ko.dependentObservable(function () {      return Page.Utility.Registration.getPasswordLevel(this.Password());  }, viewModel);   viewModel.Lcolor = ko.dependentObservable(function () {      //根据密码强度判断***个格显示的背景色      return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))  }, viewModel);   viewModel.Mcolor = ko.dependentObservable(function () {      //根据密码强度判断第二个格显示的背景色      return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")  }, viewModel);   viewModel.Hcolor = ko.dependentObservable(function () {      //根据密码强度判断第三个格显示的背景色      return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"  }, viewModel);

然后使用applyBindings方法将view model绑定到该页面,你可以使用jQuery的ready函数来执行该绑定代码,也可以在页面最下方执行绑定代码,我们这里使用了jQuery,代码如下:

$((function () {      ko.applyBindings(viewModel);  }));

***,我们再看看这些值怎么动态绑定到HTML元素上的,请查看如下代码(其中使用了afterkeydown代替了onKeyUp和onBlur):

<form name="form1" action=""> 输入密码:  <input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'"> <br> 密码强度:  <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"     height="23" style='display: inline'>     <tr align="center" bgcolor="#eeeeee">         <td width="50"data-bind="style: { backgroundColor: Lcolor }">弱</td>         <td width="50"data-bind="style: { backgroundColor: Mcolor }">中</td>         <td width="50"data-bind="style: { backgroundColor: Hcolor }">强</td>     </tr> </table> </form>

然后就OK,运行代码查看,一模一样的功能展示出来了。

如果去掉为验证而改善的代码,总代码肯定是比原有的方式少的。

完整版代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>     <script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>     <script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script> </head> <body>     <script type="text/javascript">         var PagePage = Page || {};          PagePage.Utility = Page.Utility || {};          PagePage.Utility.Registration = Page.Utility.Registration || {};           //获取密码强度          Page.Utility.Registration.getPasswordLevel =function (password) {              if (password ==null|| password =='')                  return0;               if (password.length <=4)                  return0; //密码太短               var Modes =0;              for (i =0; i < password.length; i++) {                  Modes |= CharMode(password.charCodeAt(i));              }              return bitTotal(Modes);               //CharMode函数   function CharMode(iN) {                  if (iN >=48&& iN <=57) //数字  return1;                  if (iN >=65&& iN <=90) //大写字母  return2;                  if (iN >=97&& iN <=122) //小写  return4;                  else                      return8; //特殊字符               }               //bitTotal函数  function bitTotal(num) {                  modes =0;                  for (i =0; i <4; i++) {                      if (num &1) modes++;                      num >>>=1;                  }                  return modes;              }          };           var viewModel = {              Password: ko.observable(""),              Ocolor: "#eeeeee"          };           viewModel.PasswordLevel = ko.dependentObservable(function () {              return Page.Utility.Registration.getPasswordLevel(this.Password());          }, viewModel);           viewModel.Lcolor = ko.dependentObservable(function () {              //根据密码强度判断***个格显示的背景色  returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))          }, viewModel);           viewModel.Mcolor = ko.dependentObservable(function () {              //根据密码强度判断第二个格显示的背景色  returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")          }, viewModel);           viewModel.Hcolor = ko.dependentObservable(function () {              //根据密码强度判断第二个格显示的背景色  returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"          }, viewModel);           $((function () {              ko.applyBindings(viewModel);          }));                </script>     <form name="form1" action="">     输入密码:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">     <br>     密码强度:      <table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"         height="23" style='display: inline'>         <tr align="center" bgcolor="#eeeeee">             <td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">                 弱              </td>             <td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">                 中              </td>             <td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">                 强              </td>         </tr>     </table>     </form> </body> </html>

关于JavaScript中怎么评估用户输入密码的强度就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯