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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
python遍历类中所有成员的方法
2015/03/18 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Django models filter筛选条件详解
2020/03/16 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
迟到检讨书1000字
2014/01/15 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
二十年同学聚会致辞
2015/07/28 职场文书