• 密码强度应用(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>
  • 相关阅读:
    一些常用的接口地址
    1-项目启动
    事件处理优化
    如何javascript获取css中的样式
    mysql编程--创建函数出错的解决方案
    mysql编程---函数
    mysql---数据控制语言(用户及其权限管理)
    php与mysql的常规使用
    php数组的使用
    php函数的使用
  • 原文地址:https://www.cnblogs.com/yuwensong/p/3804276.html
Copyright © 2020-2023  润新知