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 DOM 操作实现代码
Aug 01 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 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电台频率大全 - 26 西藏自治区
2020/03/11 无线电
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
splice slice区别
2006/10/09 Javascript
html读出文本文件内容
2007/01/22 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
pandas的resample重采样的使用
2020/04/24 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
查摆问题整改措施
2014/10/24 职场文书
爱国影片观后感
2015/06/18 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang