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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
Bootstrap实现翻页效果
Nov 27 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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制作的意见反馈表源码
2007/03/11 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP URL路由类实例
2013/11/12 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
js实现登录时记住密码的方法分析
2020/04/05 Javascript
python 基础教程之Map使用方法
2017/01/17 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python面向对象之继承代码详解
2018/01/29 Python
python实现多层感知器
2019/01/18 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python实发邮件实例详解
2019/11/11 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
反邪教宣传工作方案
2014/05/07 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
python如何将mat文件转为png
2022/07/15 Python