js正则表达式验证密码强度【推荐】
作者：chang红达 时间：2024-04-29 13:39:30
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证密码强度</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background:#ccc;}
#demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;}
#strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;}
.lv1{background:red;}
.lv2{background:blue;width:200px;}
.lv3{background:green;width:300px;}
</style>
</head>
<body>
<div id="demo">
<label for="ipt">密码：</label>
<input type="text" id="ipt"><br/>
<em>密码强度：</em><em id="strength"></em>
<div id="strength_length"></div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
var arr = ["","低","中","高"];
// 获取对象
var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length");
// 密码输入事件
ipt.onkeyup = function(){
var s = 0;
var txt = this.value;
if( /[a-zA-Z]/.test(txt) ){
s++;
};
if( /[0-9]/.test(txt) ){
s++;
};
if( /[^0-9a-zA-Z]/.test(txt) ){
s++;
};
if( txt.length <6 ){
s = 0;
};
strength.innerHTML = arr[s];
strLength.className = "lv" + s;
}
})(window)
</script>
</html>
来源：http://www.qdfuns.com/notes/38951/d92fe271656a360ab1f93364809cd3ba.html
标签：js,密码强度
0
投稿猜你喜欢
基于PHP做个图片防盗链
2023-05-25 00:27:30
Python Logging 日志记录入门学习
2022-05-17 14:48:39
Python sklearn CountVectorizer使用详解
2023-06-20 08:19:05
python3写的简单本地文件上传服务器实例
2023-08-23 02:50:58
python3实现名片管理系统（控制台版）
2021-06-28 14:34:14
DOS命令行窗口mysql中文显示乱码问题解决方法
2024-01-26 13:53:44
Pygame Rect区域位置的使用(图文)
2023-08-14 05:27:48
DW表格应用之细线框的制作
2008-02-03 19:00:00
python 实现一个贴吧图片爬虫的示例
2023-03-01 08:43:28
JavaScript高级程序设计 扩展--关于动态原型
2024-04-10 11:03:50
python的re模块使用方法详解
2022-08-10 16:18:20
php字符串截取函数用法分析
2023-06-28 22:19:26
numpy模块中axis的理解与使用
2023-06-26 22:55:28
CODEPAGE=936是什么意思?
2009-07-05 18:37:00
python利用socket实现客户端和服务端之间进行通信
2022-04-23 07:34:59
ASP 快速执行网页
2020-07-07 11:14:17
Python异常处理如何才能写得优雅(retrying模块)
2023-07-13 05:50:44
关于从MySQL转向ADODB的方法
2011-06-02 12:05:00
老生常谈Python之装饰器、迭代器和生成器
2023-04-08 08:28:19
ES6深入理解之“let”能替代”var“吗?
2024-05-28 15:41:33