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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
javascript时间函数大全
Jun 30 Javascript
AngularJs Managing Service Dependencies详解
Sep 02 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
详解PHP PDO简单教程
2019/05/28 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
python实现简单socket通信的方法
2016/04/19 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
Django之模板层的实现代码
2019/09/09 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
如何验证python安装成功
2020/07/06 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
高级3D打印市场:Gambody
2019/12/26 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
2014年卫生院工作总结
2014/12/03 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
紧急迫降观后感
2015/06/15 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
PO模式在selenium自动化测试框架的优势
2022/03/20 Python