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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
PHP中使用BigMap实例
2015/03/30 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
项目实践之javascript技巧
2007/12/06 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python生成随机密码的方法
2017/06/16 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
学生退学证明
2015/06/23 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
PHP实现两种排课方式
2021/06/26 PHP