JavaScript密码强度提示

 

  

   

    

        

         

          输入密码的时候，根据密码的复杂程度给出弱、中和强等类似的提示。 
         
         

          下面分享使用JavaScript如何实现此效果。代码实例如下: 
         
         

          <!DOCTYPE html>
         
         

          <
          html
          >
         
         

          <
          head
          >
         
         

          <
          meta 
          charset
          =
          " utf-8"
          >
         
         

          <
          meta 
          name
          =
          "author" 
          content
          =
          "http://www.softwhy.com/" 
          />
         
         

          <
          head
          >
         
         

          <
          title
          >蚂蚁部落</
          title
          >
         
         

          <
          style 
          type
          =
          "text/css"
          >
         
         

          #pwdLever td{
         
         

            
          background-color:Gray;
         
         

            
          width:45px;
         
         

            
          text-align:center;
         
         

          }
         
         

          </
          style
          >
         
         

          <
          script 
          type
          =
          "text/javascript"
          >
         
         

          window.onload=function(){
         
         

            
          var textInput = document.getElementById("txtPwd");
         
         

            
          //给密码输入框 注册键放开事件
         
         

            
          textInput.onkeyup=function(){
         
         

              
          var pwdValue=this.value;
         
         

              
          var num=pwdChange(pwdValue);
         
         

              
          var tds=document.getElementById("pwdLever").getElementsByTagName("td");
         
         

              
          //修改密码颜色
         
         

              
          if(num==0||num==1){
         
         

                
          tds[0].style.backgroundColor="red";
         
         

                
          tds[1].style.backgroundColor="gray";
         
         

                
          tds[2].style.backgroundColor="gray";
         
         

              
          }
         
         

              
          else if(num == 2){
         
         

                
          tds[0].style.backgroundColor = "red";
         
         

                
          tds[1].style.backgroundColor = "red";
         
         

                
          tds[2].style.backgroundColor = "gray";
         
         

              
          }
         
         

              
          else if(num == 3) {
         
         

                
          tds[0].style.backgroundColor = "red";
         
         

                
          tds[1].style.backgroundColor = "red";
         
         

                
          tds[2].style.backgroundColor = "red";
         
         

              
          }
         
         

              
          else{
         
         

                
          tds[0].style.backgroundColor = "gray";
         
         

                
          tds[1].style.backgroundColor = "gray";
         
         

                
          tds[2].style.backgroundColor = "gray";
         
         

              
          }
         
         

            
          }
         
         

          }
         
         

          function pwdChange(v){
         
         

            
          var num = 0;
         
         

            
          var reg = /\d/; //如果有数字
         
         

            
          if (reg.test(v)) {
         
         

              
          num++;
         
         

            
          }
         
         

            
          reg = /[a-zA-Z]/; //如果有字母
         
         

            
          if(reg.test(v)){
         
         

              
          num++;
         
         

            
          }
         
         

            
          reg = /[^0-9a-zA-Z]/; //如果有特殊字符
         
         

            
          if(reg.test(v)) {
         
         

              
          num++;
         
         

            
          }
         
         

            
          //如果密码小于6 
         
         

            
          if(v.length < 6){ 
         
         

              
          num--;
         
         

            
          }
         
         

            
          return num;
         
         

          }
         
         

          </
          script
          >
         
         

          </
          head
          >
         
         

          <
          body
          >
         
         

          <
          table
          >
         
         

            
          <
          tr
          >
         
         

              
          <
          td
          ><
          input 
          type
          =
          "text" 
          id
          =
          "txtPwd" 
          /></
          td
          >
         
         

            
          </
          tr
          >
         
         

            
          <
          tr
          >
         
         

              
          <
          td
          >
         
         

               
          <
          table 
          id
          =
          "pwdLever"
          >
         
         

                  
          <
          tr
          >
         
         

                    
          <
          td
          >弱</
          td
          >
         
         

                    
          <
          td
          >中</
          td
          >
         
         

                    
          <
          td
          >强</
          td
          >
         
         

                  
          </
          tr
          >
         
         

                
          </
          table
          >
         
         

               
          </
          td
          >
         
         

            
          </
          tr
          >
         
         

          </
          table
          >
         
         

          </
          body
          >
         
         

          </
          html
          >
         
        
   
  
 

在输入密码的时候，显示当前密码的强度。下面介绍一下实现过程:

一.实现原理:

原理比较简单，当在密码框输入密码之后触发onkeyup事件进而执行事件处理函数，此函数可以判断当前密码框中的密码的强度，并返回一个值，然后根据此此设置三个单元格的背景颜色，也就实现了密码强度提示效果。

二.代码注释:

（1）.window.οnlοad=function(){}，当文档完全加载完毕再去执行函数中的代码。

（2）.var textInput=document.getElementById("txtPwd")，获取id值为txtPwd的对象。

（3）.textInput.οnkeyup=function(){}，为密码框绑定键盘按键onkeyup事件处理函数。

（4）.var pwdValue=this.value，获取密码框的值。

（5）. var num=pwdChange(pwdValue)，创建一个变量num并接收pwdChange()函数的返回值。

（6）.var tds=document.getElementById("pwdLever").getElementsByTagName("td")，获取id为pwdLever元素的下的所有单元格集合。

（7）.if(num==0||num==1){},根据num的值设置单元格的背景颜色。

（8）.function pwdChange(v){}，创建一个函数用来判断密码强度。