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获取页面中第一个锚定文本的方法
Apr 03 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
js模拟实现烟花特效
Mar 10 Javascript
js编写简易的计算器
Jul 29 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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
文件上传类
2006/10/09 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP反向代理类代码
2014/08/15 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python设置检查点简单实现代码
2014/07/01 Python
简单使用Python自动生成文章
2014/12/25 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
python调用c++传递数组的实例
2019/02/13 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
关于圣诞节的广播稿
2014/01/26 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
审计主管岗位职责
2014/01/31 职场文书
汽车广告策划方案
2014/05/31 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
创业计划书之花店
2019/09/20 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python