javascript实现密码强度显示


Posted in Javascript onMarch 18, 2015

密码强度显示和中文强弱显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'a.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">    

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

        <style type="text/css">

    * {margin:0px;padding:0px;}

    .J_PasswordStatus{padding-bottom:0px;height:18px;}

    .status-bar{margin:0px;display:inline-block;width:80px;height:5px;padding:1px;border:1px solid #42BF26;background-color:white;vertical-align:middle;font-size:0;}

    .status-bar span{background-color:#42BF26;height:5px;display:inline-block;}

    </style>

  </head>

  <body>

    <input type="password"  id="pwd1" style="float:left;margin-top:5px;" onkeyup="checkPassword();"/> 

        <div id="p_PasswordStatus" class="J_PasswordStatus"

            style="display: none; width: 300px;">

            <span class="trigger">密码强度: </span>

            <span class="status-bar" style="text-indent: 0px;">

            <span style="line-height: 5px;">  </span> 

            </span>

            <span class="status-result"></span>

        </div>

  </body>

</html>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript">

function checkPassword(){

    var pwd = $("#pwd1").val();

    gPasswdStatus(pwd,'p_PasswordStatus');

    }

function gPasswdStatus(value,id){

    var status = $("#"+id);

    var result = $("#"+id).find(".status-result")[0];

    var bar = $("#"+id).find(".status-bar span");

    if (value === "") {

        status.css("display","none");

    } else {

        var score = gCheckPassword(value);

        bar.css("width",score + "%");

        var resultDesp = gGetResultDesp(score);

        result.innerHTML = resultDesp;

        status.css("display","block");

    }

}

/**

 * 检验密码强度并返回得分

 * 

 * @param {}

 *            password

 * @return {Number}

 */

function gCheckPassword(password) {

    var _score = 0;

    if (!password) {

        return 0

    }

    if (password.length <= 4) {

        _score += 5

    } else {

        if (password.length >= 5 && password.length <= 7) {

            _score += 10

        } else {

            if (password.length >= 8) {

                _score += 25

            }

        }

    }

    var _UpperCount = (password.match(/[A-Z]/g) || []).length;

    var _LowerCount = (password.match(/[a-z]/g) || []).length;

    var _LowerUpperCount = _UpperCount + _LowerCount;

    if (_UpperCount && _LowerCount) {

        _score += 20

    } else {

        if (_UpperCount || _LowerCount) {

            _score += 10

        }

    }

    var _NumberCount = (password.match(/[\d]/g, "") || []).length;

    if (_NumberCount > 0 && _NumberCount <= 2) {

        _score += 10

    } else {

        if (_NumberCount >= 3) {

            _score += 20

        }

    }

    var _CharacterCount = (password.match(/[!@#$%^&*?_\.\-~]/g) || []).length;

    if (_CharacterCount == 1) {

        _score += 10

    } else {

        if (_CharacterCount > 1) {

            _score += 25

        }

    }

    if (_NumberCount && (_UpperCount && _LowerCount)

            && _CharacterCount) {

        _score += 5

    } else {

        if (_NumberCount && _LowerUpperCount && _CharacterCount) {

            _score += 3

        } else {

            if (_NumberCount && _LowerUpperCount) {

                _score += 2

            }

        }

    }

    return _score

}

 /**

  * 根据密码强度得分返回密码强弱度中文提示

  * 

  * @param {}

  *            score

  * @return {String}

  */

 function gGetResultDesp(score) {

    if (score <= 5) {

        return "\u592a\u77ed"

    } else {

    if (score > 5 && score < 20) {

        return "\u5f31"

        } else {

        if (score >= 20 && score < 60) {

            return "\u4e2d"

        } else {

            if (score >= 60) {

                return "\u5f3a"

            } else {

                return ""

            }

            }

        }

    }

 }

</script>

以上所述就是本文给大家分享的全部内容了,希望对大家熟练掌握javascript能够有所帮助。

Javascript 相关文章推荐
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
javascript 原型继承介绍
Aug 30 Javascript
jQuery函数的等价原生函数代码示例
May 27 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 #Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 #Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 #Javascript
JS制作简单的三级联动
Mar 18 #Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 #Javascript
javascript版2048小游戏
Mar 18 #Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 #Javascript
You might like
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
python实现员工管理系统
2018/01/11 Python
Python3常用内置方法代码实例
2019/11/18 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
PyTorch实现AlexNet示例
2020/01/14 Python
详解python UDP 编程
2020/08/24 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
创联软件面试题笔试题
2012/10/07 面试题
一年级班主任寄语
2014/01/19 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL