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 相关文章推荐
javascript 流畅动画实现原理
Sep 08 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP count()函数讲解
2019/02/03 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
python3音乐播放器简单实现代码
2020/04/20 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
机电专业个人求职信范文
2013/12/30 职场文书
国培远程培训感言
2014/03/08 职场文书
体育课外活动总结
2014/07/08 职场文书
企业领导对照检查材料
2014/08/20 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
比较node.js和Deno
2021/04/27 Javascript