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命令汇总,方便使用jquery的朋友
Jun 26 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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
删除无限级目录与文件代码共享
2006/07/12 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
php 学习资料零碎东西
2010/12/04 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
深入理解vue Render函数
2017/07/19 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python操作oracle的完整教程分享
2018/01/30 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
为什么要做架构设计
2015/07/08 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
小学国庆节活动方案
2014/02/11 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
境外导游求职信
2014/02/27 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书