zoukankan      html  css  js  c++  java
  • 密码强度应用(js)

     <!-- 密码强度div -->
    <div id="tips" class="help-block">
      <b class="fl">密码强度:</b><span></span><span></span><span></span>
    </div>
    <script type="text/javascript">
            $(function(){
                //开始的时候隐藏
                    $('#tips').hide();
            });
        
        //验证密码强度
                window.onload = function() {
                    //var oTips = document.getElementById("tips");
                    var oTips = $('#tips').get(0);
                    //var oInput = document.getElementsByTagName("input")[0];
                    var oInput = $('#password').get(0);
                    var aSpan = oTips.getElementsByTagName("span");
                    //var aSpan = $("#tips span");
                    //alert(aSpan);
                    var aStr = ["弱", "中", "强", "非常好"];
                    var i = 0;
                    
                    

                    oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
                        var index = checkStrong(this.value);
                        //this.className = index ? "correct" : "error";
                        oTips.className = "s" + index;
                        for ( i = 0; i < aSpan.length; i++)
                            aSpan[i].className = aSpan[i].innerHTML = "";
                            
                        if(index==3){
                            index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
                            index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
                            index && (aSpan[index - 3].className = "active", aSpan[index - 3].innerHTML = aStr[index - 3]);
                        }else if(index==2){
                            index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
                            index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
                        }else if(index==1){
                            index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
                        }
                        
                        if($('#tips').parent().parent().hasClass('error')){
                            $('#tips').hide();
                        }else if($('#password').val().length>=6){
                            $('#tips').show();
                        }
                            
                    };
                };
                /** 强度规则
                 + ------------------------------------------------------- +
                 1) 任何少于6个字符的组合,弱;任何字符数的同类字符组合,弱;
                 2) 任何字符数的两类字符组合,中;
                 3) 12位字符数以下的三类或四类字符组合,强;
                 4) 12位字符数以上的三类或四类字符组合,非常好。
                 + ------------------------------------------------------- +
                 **/
                //检测密码强度
                function checkStrong(sValue) {
                    var modes = 0;
                    if (sValue.length < 6)
                        return modes;
                    
                    //数字
                    if (/d/.test(sValue))
                        modes++;

                    //字母
                    if(/[a-zA-Z]/.test(sValue))
                        modes++;
                    
                    //特殊字符
                    if (/W/.test(sValue))
                        modes++;
                    
                    switch (modes) {
                        case 1:
                            return 1;
                            break;
                        case 2:
                            return 2;
                            break;
                        case 3:
                            return 3;
                            break;
                    }
                }
            </script>
  • 相关阅读:
    高并发,执行耗时短的任务,还有低并发,执行耗时长的任务,各自选取什么样的线程池比较合理?为什么?如果业务场景是高并发,且任务耗时长时,有什么解决思路?
    java的重载、覆盖和隐藏的区别
    写出以下代码的输出结果?
    MySQL存储引擎通常有哪3种?各自分别有什么特点?应用场景是哪些?
    oracle的索引有几种?各有何用途?
    Apach Web Server区别于其他应用服务器的主要特点是什么?
    eclipse左边工程列表不见了,怎么调出来
    Java 生成一个记事本
    JS indexOf(),split(),substring(),substr(),Math.ceil(),Math.floor(),Math.round()的内容
    Java 有关于线程
  • 原文地址:https://www.cnblogs.com/yuwensong/p/3804276.html
Copyright © 2011-2022 走看看