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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
定义select的边框颜色
2008/04/28 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
《学会合作》教学反思
2014/04/12 职场文书
学困生转化工作总结
2015/08/13 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript