zoukankan      html  css  js  c++  java
  • 密码强度

    效果

    		<style type="text/css">
    			span{
    				80px;
    				height: 10px;
    				display: inline-block;
    				background: grey;
    				margin-right: 3px;
    				font-size: 18px;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="text" id="txt" />
    		<div id="box" style="margin-top: 4px;">
    			<span id="r">弱</span>
    			<span id="z">中</span>
    			<span id="q">强</span>
    		</div>
    	</body>
    </html>
    <script src="public.js"></script>
    <script type="text/javascript">
     	/*
     	 1、一类字符 是   弱         纯数字  弱              纯字母  弱                  纯 特殊字符 弱
     	 2、两类字符 是   中   
     	 3、三类字符      强
     	*/	
     	//包含数字   字母  特殊字符 三个正则
    	var num = /^d+$/;//纯数字
    	var char_ = /^[a-z]+$/i;//纯字母
    	var other = /^[!@#$%^&*]+$/;//纯特殊字符
    	
    	var _num = /d+/;//包含数字
    	var _char = /[a-z]+/i;//包含字母
    	var _other = /[!@#$%^&*]+/  //包含特殊字符
    	
    	$id("txt").onkeyup = function(){
    		var str = this.value;
    		if(str.length < 5){//内容的长度小于5,颜色不变
    			$id("r").style.background = "grey";
    			$id("z").style.background = "grey";
    			$id("q").style.background = "grey";
    			return
    		}
    		//排他思想
    		$id("r").style.background = "grey";
    		$id("z").style.background = "grey";
    		$id("q").style.background = "grey";
    		if(num.test(str) || char_.test(str) || other.test(str)){//纯数字或者纯字母或者纯其他字符都是弱
    			$id("r").style.background = "deeppink";
    		}else if(_num.test(str) && _char.test(str) && _other.test(str)){//三个都包含 强
    			$id("q").style.background = "deeppink";
    		}else{
    			$id("z").style.background = "deeppink";
    		}
    	}
    </script>
    

      

  • 相关阅读:
    修改weblogic jvm启动参数
    weblogic部署步骤
    weblogic安装步骤
    sqldeveloper 导出数据库
    VO与PO 的理解
    【Hyper-V】与【VirtualBox】【VMware】冲突的解决方法
    xstream 实现simplebean2xml ,xml2simplebean
    eclipse中SVN报错解决
    点击eclipse包报错
    myeclipce项目导入eclipse中报错
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/11910683.html
Copyright © 2011-2022 走看看