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 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
javascript canvas实现简易时钟例子
Sep 05 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
PHP页面间传递参数实例代码
2008/06/05 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php实现mysql封装类示例
2014/05/07 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
jquery maxlength使用说明
2011/09/09 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python中int与str互转方法
2018/07/02 Python
python 剪切移动文件的实现代码
2018/08/02 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
初三学习决心书
2014/03/11 职场文书
小学师德师风整改措施
2014/10/27 职场文书
身份证丢失证明
2015/06/19 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
python数字类型和占位符详情
2022/03/13 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL