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中监听IME键盘输入事件
May 29 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python循环实现n的全排列功能
2019/09/16 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
社区党员先进事迹
2014/01/22 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript