js如何验证密码强度


Posted in Javascript onMarch 18, 2020

验证“密码强度”的例子很常见,我们注册新的账号的时候往往设置密码,此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。

原理:

1、如果输入的密码为单纯的数字或者字母:提示“

2、如果是数字和字母混合的:提示“” 

3、如果数字、字母、特殊字符都有:提示“

下面是一种“密码强度”的验证方法,觉得很有意思。

HTML和CSS代码:

<!DOCTYPE HTML>
<html > <!-- lang="en" -->
<head>
 <meta charset="utf-8" />
 <title>密码强度</title>
 <style type="text/css">
 
 #pwdStrength {
  height: 30px;
  width: 180px;
  border: 1px solid #ccc;
  padding: 2px;
  
 } 
 .strengthLv1 {
  background: red;
  height: 30px;
  width: 60px;
 }
 
 .strengthLv2 {
  background: orange;
  height: 30px;
  width: 120px;
 }
 
 .strengthLv3 {
  background: green;
  height: 30px;
  width: 180px;
 }
 #pwd {
  height:30px;
  font-size :20px;
 }
 strong {
  margin-left:90px;
 }
 #pwd1 {
  color:red;
  margin-top:5px;
  margin-bottom:5px;  
 }
 </style>
</head>
<body>
 <input type="password" name="pwd" id="pwd" maxlength="16" />
 <div class="pass-wrap">
 <!--<em>密码强度:</em>-->
 <p id="pwd1" name="pwd">密码强度:</p>
 <div id="pwdStrength"></div>
 </div>
</body>
</html>

javascript代码:

<script type="text/javascript">
 function PasswordStrength(passwordID, strengthID) {
 this.init(strengthID);
 var _this = this;
 document.getElementById(passwordID).onkeyup = function () {//onkeyup 事件,在键盘按键被松开时发生,进行判断
  _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; } //如果密码长度小于6位,提示消息为空
 if (lv > 3) { lv = 3; } 
 this.oStrength.className = 'strengthLv' + lv;
 this.oStrengthTxt.innerHTML = aLvTxt[lv];
 };
new PasswordStrength('pwd','pwdStrength');
</script>

效果图:

js如何验证密码强度

小结:

1.利用onkeyup 事件(在键盘按键被松开时发生)进行三种判断,简单方便。
2. 正则表达式的功能真的很强大。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
js验证密码强度解析
Mar 18 #Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
You might like
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python人民币小写转大写辅助工具
2018/06/20 Python
django缓存配置的几种方法详解
2018/07/16 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python Pandas 箱线图的实现
2019/07/23 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
html5时钟实现代码
2010/10/22 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
数字漫画:comiXology
2020/06/13 全球购物
竞选大队长演讲稿
2014/04/29 职场文书
中国合伙人观后感
2015/06/02 职场文书
python中sys模块的介绍与实例
2021/04/17 Python