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 相关文章推荐
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vue如何使用async、await实现同步请求
Dec 09 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 SQL之where语句生成器
2009/03/24 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
srcElement表格样式
2006/09/03 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
npm scripts 使用指南详解
2018/10/08 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
python 多线程应用介绍
2012/12/19 Python
Python 登录网站详解及实例
2017/04/11 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
详解Python中namedtuple的使用
2020/04/27 Python
python求解汉诺塔游戏
2020/07/09 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
环保建议书
2014/03/12 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
教育实习指导教师评语
2014/12/31 职场文书
世界环境日活动总结
2015/02/11 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python