JavaScript注册时密码强度校验代码


Posted in Javascript onJune 30, 2017

密码强度有4个状态,分别如下图。

无密码状态

JavaScript注册时密码强度校验代码

密码低级状态

JavaScript注册时密码强度校验代码

密码中级状态

JavaScript注册时密码强度校验代码

密码高级状态

JavaScript注册时密码强度校验代码

实现的代码主要如下:

HTML代码

<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="pwd_Weak" class="pwd pwd_c"> </td>
<td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
<td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
</tr>
</table>

CSS代码

.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;} 
.pwd_f{color:#BBBBBB;} 
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
.pwd_c_r{border-right:1px solid #D0D0D0;} 
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;} 
.pwd_Medium_c_r{border-right:1px solid #E9AE10;} 
.pwd_Strong_c_r{border-right:1px solid #267A12;}

JS代码

function CheckIntensity(pwd) {
    var Mcolor, Wcolor, Scolor, Color_Html;    
    var m = 0;   
    //匹配数字
    if (/\d+/.test(pwd)) {
      debugger;
      m++;
    };
    //匹配字母
    if (/[A-Za-z]+/.test(pwd)) {     
      m++;
    };
    //匹配除数字字母外的特殊符号
    if (/[^0-9a-zA-Z]+/.test(pwd)) {      
      m++;
    };
    
    if (pwd.length <= 6) { m = 1; }
    if (pwd.length <= 0) { m = 0; }    
    switch (m) {
      case 1:
        Wcolor = "pwd pwd_Weak_c";
        Mcolor = "pwd pwd_c";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "弱";
        break;
      case 2:
        Wcolor = "pwd pwd_Medium_c";
        Mcolor = "pwd pwd_Medium_c";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "中";
        break;
      case 3:
        Wcolor = "pwd pwd_Strong_c";
        Mcolor = "pwd pwd_Strong_c";
        Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";
        Color_Html = "强";
        break;
      default:
        Wcolor = "pwd pwd_c";
        Mcolor = "pwd pwd_c pwd_f";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "无";
        break;
    }
    document.getElementById('pwd_Weak').className = Wcolor;
    document.getElementById('pwd_Medium').className = Mcolor;
    document.getElementById('pwd_Strong').className = Scolor;
    document.getElementById('pwd_Medium').innerHTML = Color_Html;
  }

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

Javascript 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
vue实现图片上传到后台
Jun 29 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
Bootstrap Table从零开始
Jun 30 #Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 #Javascript
常见的浏览器Hack技巧整理
Jun 29 #Javascript
详解webpack+gulp实现自动构建部署
Jun 29 #Javascript
bootstrapvalidator之API学习教程
Jun 29 #Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 #Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
You might like
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
浅谈JavaScript闭包
2019/04/09 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
python解析xml文件实例分析
2015/05/27 Python
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
应届大学生自荐信
2013/12/05 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
大学生演讲稿
2014/04/25 职场文书
租房安全协议书
2014/08/20 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
本溪关门山导游词
2015/02/09 职场文书
工地食品安全责任书
2015/05/09 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android