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对表单的操作代码集合
Apr 06 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
H5上传本地图片并预览功能
May 08 Javascript
简单实现js拖拽效果
Jul 25 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 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权限分配的实现代码
2013/04/28 PHP
基于header的一些常用指令详解
2013/06/06 PHP
destoon官方标签大全
2014/06/20 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
vue mounted组件的使用
2018/06/18 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python里dict变成list实例方法
2019/06/26 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
10个示例带你掌握python中的元组
2020/11/23 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
初中差生评语
2014/12/29 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2015初中团委工作总结
2015/07/28 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python