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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JavaScript实现区块链
Mar 14 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 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和Java的des加密解密代码分享
2014/06/26 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
原生js实现autocomplete插件
2016/04/14 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
vue $router和$route的区别详解
2020/12/02 Vue.js
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
logging level级别介绍
2020/02/21 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
html5唤起app的方法
2017/11/30 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
大型营销活动计划书
2014/04/28 职场文书
活动总结范文
2014/08/30 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
志愿者个人总结
2015/03/03 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android