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 相关文章推荐
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
python基础教程之循环介绍
2014/08/29 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
小学教师管理制度
2014/01/18 职场文书
领导调研接待方案
2014/02/27 职场文书
面试自我评价范文
2014/09/17 职场文书
中小学校园安全广播稿
2014/09/29 职场文书