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 相关文章推荐
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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 CURL用法的深入分析
2013/06/09 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP7新功能总结
2019/04/14 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
python实现扫描日志关键字的示例
2018/04/28 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python3 logging日志封装实例
2020/04/08 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
策划主管的工作职责
2013/11/24 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
canvas实现贪食蛇的实践
2022/02/15 Javascript