首页 > 代码库 > 四级密码强度检测
四级密码强度检测
<!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正则表达式的修改。另外,当把最后一个图片的输入内容,逐步地删除,直到只剩第一个图片的输入内容,这一过程中,效果就是下面的 从下到上变化了
四级密码强度检测
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。