首页 > 代码库 > 四级密码强度检测

四级密码强度检测

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 密码强度检测 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
	input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
	#tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
	#tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
	#tips .s1{background: #F45A68;}/*红色*/
	#tips .s2{background: #fc0;}/*橙色*/
	#tips .s3{background: #cc0;}/*黄色*/
	#tips .s4{background: #14B12F;}/*绿色*/
  </style>
 </head>
 <body>
  <input type="text" id="password" value=http://www.mamicode.com/"" maxlength="16" />>


说明: 这里实现的功能主要是,输入密码的时候,一边输一边检测,有四个安全级别,当输入的密码符合某个级别的规则时,该级别的标志条就会高亮变色。

下面是测试的情况,(这里为了能看到效果,所以把type=“password”故意改成type=“text”),至于检测中级别的规则,读者可以自己根据需要自行修改,主要是js正则表达式的修改。另外,当把最后一个图片的输入内容,逐步地删除,直到只剩第一个图片的输入内容,这一过程中,效果就是下面的 从下到上变化了


技术分享

技术分享

技术分享

技术分享




四级密码强度检测