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基础语法让人疑惑的地方小结
May 23 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 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 zip文件解压类代码
2009/12/02 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js验证上传图片的方法
2015/05/12 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Python subprocess库的使用详解
2018/10/26 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python实现远程控制电脑
2019/05/23 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
Python调用Redis的示例代码
2020/11/24 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
中学教师师德承诺书
2014/05/23 职场文书
银行求职信
2014/05/31 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
2015年中秋寄语
2015/07/31 职场文书