js检验密码强度(低中高)附图


Posted in Javascript onJune 05, 2014

最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高)。今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求。

html 代码如下:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>密码强度</title> 
<style type="text/css"> 
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} 
.strengthLv1{background:red;height:6px;width:40px;} 
.strengthLv2{background:orange;height:6px;width:80px;} 
.strengthLv3{background:green;height:6px;width:120px;} 
</style> 
</head> 
<body> 
<input type="password" name="pass" id="pass" maxlength="16"/> 
<div class="pass-wrap"> 
<em>密码强度:</em> 
<div id="passStrength"></div> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="js/passwordStrength.js"></script> 
<script type="text/javascript"> 
new PasswordStrength('pass','passStrength'); 
</script>

js 代码如下:
function PasswordStrength(passwordID,strengthID){ 
this.init(strengthID); 
var _this = this; 
document.getElementById(passwordID).onkeyup = function(){ 
_this.checkStrength(this.value); 
} 
}; 
PasswordStrength.prototype.init = function(strengthID){ 
var id = document.getElementById(strengthID); 
var div = document.createElement('div'); 
var strong = document.createElement('strong'); 
this.oStrength = id.appendChild(div); 
this.oStrengthTxt = id.parentNode.appendChild(strong); 
}; 
PasswordStrength.prototype.checkStrength = function (val){ 
var aLvTxt = ['','低','中','高']; 
var lv = 0; 
if(val.match(/[a-z]/g)){lv++;} 
if(val.match(/[0-9]/g)){lv++;} 
if(val.match(/(.[^a-z0-9])/g)){lv++;} 
if(val.length < 6){lv=0;} 
if(lv > 3){lv=3;} 
this.oStrength.className = 'strengthLv' + lv; 
this.oStrengthTxt.innerHTML = aLvTxt[lv]; 
};

效果图:
js检验密码强度(低中高)附图 
使用说明:

1、对象的第一个参数是密码输入框的 id,第二个参数是密码强度长条的 id。

2、checkStrength 方法中可以自定义密码强度的规则。

3、密码强度显示低中高分别对应 3 个 css 样式(strengthLv1、strengthLv2、strengthLv3)。

Javascript 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
JS实现点击掉落特效
Jan 29 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
如何获取网站icon有哪些可行的方法
Jun 05 #Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 #Javascript
网页右下角弹出窗体实现代码
Jun 05 #Javascript
获取中文字符串的实际长度代码
Jun 05 #Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 #Javascript
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
python实现代码统计程序
2019/09/19 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
详解Django配置JWT认证方式
2020/05/09 Python
python 模拟登录B站的示例代码
2020/12/15 Python
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
计算机网络专业求职信
2014/06/05 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
bose降噪耳机音能消除人声吗
2022/04/19 数码科技