js 验证密码强弱的小例子

 更新时间:2013年03月21日 10:53:54   作者:  
js 验证密码强弱的小例子,需要的朋友可以参考一下

页面代码:

复制代码 代码如下:

<table>
        <tr><td><input type="text" id="txtPwd" /></td></tr>
        <tr><td>
            <table id="pwdLever">
                <tr>
                    <td>弱</td>
                    <td>中</td>
                    <td>强</td>
                </tr>
            </table>
        </td></tr>
    </table>

样式:

复制代码 代码如下:

<style type="text/css">
        #pwdLever td
        {
           background-color:Gray;
           width:45px;
           text-align:center;
        }
    </style>

js代码:

复制代码 代码如下:

<script type="text/javascript">
        window.onload = function () {
            var textInput = document.getElementById("txtPwd");
            //给密码输入框 注册键放开事件
            textInput.onkeyup = function () {
                var pwdValue = this.value;
                var num = pwdChange(pwdValue);
                var tds = document.getElementById("pwdLever").getElementsByTagName("td");
                //修改密码颜色
                if (num == 0 || num == 1) {
                    tds[0].style.backgroundColor = "red";
                    tds[1].style.backgroundColor = "gray";
                    tds[2].style.backgroundColor = "gray";
                }
                else if (num == 2) {
                    tds[0].style.backgroundColor = "red";
                    tds[1].style.backgroundColor = "red";
                    tds[2].style.backgroundColor = "gray";
                }
                else if (num == 3) {
                    tds[0].style.backgroundColor = "red";
                    tds[1].style.backgroundColor = "red";
                    tds[2].style.backgroundColor = "red";
                }
                else {
                    tds[0].style.backgroundColor = "gray";
                    tds[1].style.backgroundColor = "gray";
                    tds[2].style.backgroundColor = "gray";
                }
            }
        }
        function pwdChange(v) {
            var num = 0;
            var reg = /\d/; //如果有数字
            if (reg.test(v)) {
                num++;
            }
            reg = /[a-zA-Z]/; //如果有字母
            if (reg.test(v)) {
                num++;
            }
            reg = /[^0-9a-zA-Z]/; //如果有特殊字符
            if (reg.test(v)) {
                num++;
            }
            if (v.length < 6) { //如果密码小于6
                num--;
            }
            return num;
        }
    </script>

相关文章

  • Javascript 函数中的参数使用分析

    Javascript 函数中的参数使用分析

    关于JS中的函数,相信大家已经很了解了,其中有些特性呢,感觉还是值得提一提的,下面就说说JS中的函数吧。
    2010-03-03
  • 9个让JavaScript调试更简单的Console命令

    9个让JavaScript调试更简单的Console命令

    这篇文章主要为大家详细介绍了9个让JavaScript调试更简单的Console命令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 常见的javascript跨域通信方法

    常见的javascript跨域通信方法

    这篇文章主要介绍了常见的javascript跨域通信方法
    2015-12-12
  • javascript中call,apply,bind函数用法示例

    javascript中call,apply,bind函数用法示例

    这篇文章主要介绍了javascript中call,apply,bind函数用法,结合实例形式分析了call,apply,bind函数的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • electron 无边框窗口拖拽移动问题及解决办法

    electron 无边框窗口拖拽移动问题及解决办法

    在做一款uTools的插件,悬浮文本,窗口是没有标题栏的,所以需要找一个地方可以拖动移动位置,本文给大家介绍electron 无边框窗口拖拽移动问题及解决办法,感兴趣的朋友一起看看吧
    2023-12-12
  • 详解如何利用JavaScript绘制堆叠柱状图

    详解如何利用JavaScript绘制堆叠柱状图

    堆叠柱状图将每个柱子进行分割以显示相同类型下各个数据的大小情况。可以形象得展示一个大分类包含的每个小分类的数据,以及各个小分类的占比,显示的是单个项目与整体之间的关系。本文将利用JavaScript实现堆叠柱状图的绘制,需要的可以参考一下
    2022-03-03
  • javascript实现百度地图鼠标滑动事件显示、隐藏

    javascript实现百度地图鼠标滑动事件显示、隐藏

    这篇文章主要介绍了javascript实现百度地图鼠标滑动事件显示、隐藏的思路和方法,十分的实用,这里推荐给小伙伴们,有需要的朋友可以参考下。
    2015-04-04
  • js控制网页前进和后退的方法

    js控制网页前进和后退的方法

    这篇文章主要介绍了js控制网页前进和后退的方法,涉及javascript中history.go方法的相关使用技巧,非常简单实用,需要的朋友可以参考下
    2015-06-06
  • 如何用js将blob为pcm格式转换为MP3格式

    如何用js将blob为pcm格式转换为MP3格式

    要将PCM文件转换为MP3文件,您可以使用Js实现,这篇文章主要给大家介绍了关于如何用js将blob为pcm格式转换为MP3格式的相关资料,需要的朋友可以参考下
    2023-11-11
  • eCharts图表实现扇形和折线图代码示例

    eCharts图表实现扇形和折线图代码示例

    本文概述了前端和后端实现数据可视化图表的步骤,前端部分涉及引入文件、设置盒子、发送请求等,最终通过ECharts初始化图形,后端则包括定义VO类、处理mapper和业务逻辑等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09

最新评论