js正则表达式验证密码强度【推荐】


Posted in Javascript onMarch 03, 2017

效果图:

js正则表达式验证密码强度【推荐】

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 #Javascript
AngularJS表格样式简单设置方法示例
Mar 03 #Javascript
AngularJS表格添加序号的方法
Mar 03 #Javascript
JS实现双击内容变为可编辑状态
Mar 03 #Javascript
You might like
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python 字符串大小写转换的简单实例
2017/01/21 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
详解爬虫被封的问题
2019/04/23 Python
python实现PID算法及测试的例子
2019/08/08 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python接口测试文件上传实例解析
2020/05/22 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
行政助理求职自荐信
2013/10/26 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
水电施工员岗位职责
2015/04/11 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python