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 相关文章推荐
使用正则替换变量
May 05 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
解析原生JS getComputedStyle
May 25 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 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
JavaScript 指导方针
2007/04/05 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
javascript定时器完整实例
2015/02/10 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
Vue header组件开发详解
2018/01/26 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Pytorch释放显存占用方式
2020/01/13 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
零基础小白多久能学会python
2020/06/22 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python-split()函数实例用法讲解
2020/12/18 Python
python re.match()用法相关示例
2021/01/27 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
应届生会计求职信
2013/11/11 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2015年暑假工作总结
2015/07/13 职场文书
《角的度量》教学反思
2016/02/18 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android