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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
Vue制作Todo List网页
Apr 26 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python中reload(module)的用法示例详解
2017/09/15 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
学生宿舍管理制度
2014/01/30 职场文书
综治目标管理责任书
2015/05/11 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
php解析非标准json、非规范json的方式实例
2022/05/10 PHP