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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
js中for in的用法示例解析
Dec 25 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 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版快速排序、冒泡排序
2014/04/09 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
详解JavaScript的变量
2019/04/04 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
一份软件工程师的面试试题
2016/02/01 面试题
运动会广播稿400字
2014/01/25 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
安全施工责任书
2014/08/25 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
大学军训决心书
2015/02/05 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
企业年会祝酒词
2015/08/11 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
商业计划书范文
2019/04/24 职场文书