【WEB前端|H5实例】HTML+CSS+JS实现修改密码的密码强度判断

最新推荐文章于 2024-08-28 09:21:43 发布

EileenDeng

最新推荐文章于 2024-08-28 09:21:43 发布

阅读量3.4k

点赞数

文章标签： js css javascript html5 css3

本文链接：https://blog.csdn.net/dxy1128/article/details/105642347

版权

HTML5 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
		<style type="text/css">
            .default {
				background: #eeeeee;
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 4px 2px;
			}
			.weak {
				background: #FF0000;
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 4px 2px;
				}
			.medium {
				background: #FF9900;
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 4px 2px;
				}
			.strong {
				background: #81c234;
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				margin: 4px 2px;
				}
		    .aaa{
				display: inline-block;
				width: 70px;
				height: 30px;
				line-height: 30px;
				background: #ddd;
				text-align: center;
				margin: 4px 2px;}
		</style>
    </head>
    <script type="text/javascript">
        window.onload = function(){

            var oInput = document.getElementById('pwd');
            oInput.value = '';
            var spans = document.getElementsByTagName('span');
						var spans1=[];
						var j=0;
						for(var i=0;i<spans.length;i++)
						{
							if(spans[i].className=="aaa"){
								spans1[j]=spans[i];
								j++;
							}
							else{
								
							}
						}
            oInput.onkeyup = function(){
                //强度状态设为默认
								
                spans1[0].className = spans1[1].className = spans1[2].className = "default";
								
                var pwd = this.value;
                var result = 0;
                for(var i = 0, len = pwd.length; i < len; ++i){
                    result |= charType(pwd.charCodeAt(i));
                }

                var level = 0;
                //对result进行四次循环，计算其level
                for(var i = 0; i <= 4; i++){
                    if(result & 1){
                        level ++;
                    }
                    //右移一位
                    result = result >>> 1;
                }

                if(pwd.length >= 6){
                    switch (level) {
                        case 1:
                            spans1[0].className = "weak";
                            break;
                        case 2:
                            spans1[0].className = "medium";
                            spans1[1].className = "medium";
                            break;
                        case 3:
                        case 4:
                            spans1[0].className = "strong";
                            spans1[1].className = "strong";
                            spans1[2].className = "strong";
                            break;
                    }
                }
            }
        }
        /*
            定义一个函数，对给定的数分为四类(判断密码类型)，返回十进制1，2，4，8
            数字 0001 -->1  48~57
            小写字母 0010 -->2  97~122
            大写字母 0100 -->4  65~90
            特殊 1000 --> 8 其它
        */
        function charType(num){
            if(num >= 48 && num <= 57){
                return 1;
            }
            if (num >= 97 && num <= 122) {
                return 2;
            }
            if (num >= 65 && num <= 90) {
                return 4;
            }
            return 8;
        }
    </script>
    <body>				
		<span>请输入密码：</span>
		<input type="password" name="pwd" id="pwd"/ class="input"value autocomplete="off"  />
		<span>密  码  强  度：</span>
		<span class="aaa">弱</span>
		<span class="aaa">中</span>
		<span class="aaa">强</span>
	</body>
</html>