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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
jQuery插件开发汇总
May 15 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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 session会话的安全性分析
2011/09/08 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
JavaScript入门教程 Cookies
2009/01/31 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python 字典dict使用介绍
2014/11/30 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
酒店保安员岗位职责
2014/01/31 职场文书
写给医生的感谢信
2015/01/22 职场文书
老兵退伍感言
2015/08/03 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技