JS密码强度验证

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <title>无标题页</title>

    <script language="javascript" type="text/javascript">

    //CharMode函数

    //测试某个字符是属于哪一类.

    function CharMode(iN){

        if (iN>=48 && iN <=57) //数字

        return 1;

        if (iN>=65 && iN <=90) //大写字母

        return 2;

        if (iN>=97 && iN <=122) //小写

        return 4;

        else

        return 8; //特殊字符

    }

    //bitTotal函数

    //计算出当前密码当中一共有多少种模式

    function bitTotal(num){

        modes=0;

        for (i=0;i<4;i++){

        if (num & 1) modes++;

        num>>>=1;

        }

        return modes;

    }

    //checkStrong函数

    //返回密码的强度级别  

    function checkStrong(sPW){

        if (sPW.length<=4)

        return 0; //密码太短

        Modes=0;

        for (i=0;i<sPW.length;i++){

        //测试每一个字符的类别并统计一共有多少种模式.

        Modes|=CharMode(sPW.charCodeAt(i));

        }

        return bitTotal(Modes);

    }  

    //pwStrength函数

    //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色

    function pwStrength(pwd){

        O_color="#e0f0ff";

        L_color="#FF0000";

        M_color="#FF9900";

        H_color="#33CC00";

        if (pwd==null||pwd==''){

            Lcolor=Mcolor=Hcolor=O_color;

        }

        else

        {

            S_level=checkStrong(pwd);

            switch(S_level)

            {

                case 0:

                Lcolor=Mcolor=Hcolor=O_color;

                case 1:

                Lcolor=L_color;

                Mcolor=Hcolor=O_color;

                break;

                case 2:

                Lcolor=Mcolor=M_color;

                Hcolor=O_color;

                break;

                default:

                Lcolor=Mcolor=Hcolor=H_color;

            }

        }  

        document.getElementById("strength_L").style.background=Lcolor;

        document.getElementById("strength_M").style.background=Mcolor;

        document.getElementById("strength_H").style.background=Hcolor;

        return;

    }  

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        输入密码:<input id="TextBox1" runat="server" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)" /><br />

        密码强度:

        <table border="1" cellpadding="1" cellspacing="1" borderColorDark="#fdfeff" borderColorLight="#99ccff" style="width: 200px; display: inline; background-color:#e0f0ff">

            <tr>

                <td id="strength_L" style="width: 100px; height: 19px;" align="center">

                    弱</td>

                <td id="strength_M" style="width: 100px; height: 19px;" align="center">

                    中</td>

                <td id="strength_H" style="width: 100px; height: 19px;" align="center">

                    强</td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

效果如图：

js验证密码强弱的更多相关文章

  1. 原生JS判断密码强弱

    前些天工作中有这个需求,自己手写了相关的JS代码,第一种方法是通过ASCII 码判断密码类型,完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级, ...

  2. 载 js验证密码 必须由大小写字母、数字和特殊字符组成

    转自:https://blog.csdn.net/weixin_43824935/article/details/93601064 密码长度8-16位 必须由大写字母,小写字母,数字,特殊符号组成 正 ...

  3. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  4. js验证表单密码、用户名是否输入--JS的简单应用

    在登录.注册时,我们经常会遇到下面这种情况,如果我们没有输入用户名.密码时,系统会弹出提示框.提示框信息提示内容是我们密码没有输入密码或者用户名等.那么这样的弹出框效果是如何实现的呢?文章标题既然与j ...

  5. JS高级---案例：验证密码的强度

    案例:验证密码的强度 1. 给我密码,我返回对应的级别 2. 每次键盘抬起都要获取文本框中的内容, 验证文本框中有什么东西, 得到一个级别, 然后下面的div显示对应的颜色 <!DOCTYPE ...

  6. JS简单验证密码强度

    <input type="password" id="password" value=""/><button id=&qu ...

  7. 原生js验证简洁美观注册登录页面

    序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 sign_up.html 注册表单 <!DOCTYPE html> <html lang=&qu ...

  8. ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证

    ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日 星期一 下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...

  9. 分享我常用的一些JS验证和函数

    下面是我常用一些JS验证和函数,有一些验证我直接写到了对象的属性里面了,可以直接通过对象.方法来调用//浮点数除法运算 function fdiv(a, b, n) { if (n == undefi ...

随机推荐

  1. HDU3308 线段树区间合并

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3308 ,简单的线段树区间合并. 线段树的区间合并:一般是要求求最长连续区间,在PushUp()函数中实 ...

  2. java Vamei快速教程20 GUI

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! GUI(Graphical User Interface)提供了图形化的界面,允许 ...

  3. linux 命令——34 du(转）

    Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1．命令格式: du [选项][文件] 2．命令功能 ...

  4. Redis多机数据库

    复制 PSYNC命令具有完整重同步(full resynchronization)和部分重同步(partial resynchronization)两种模式: ·其中完整重同步用于处理初次复制情况:完 ...

  5. IOS 核心动画（Core Animation）

    Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它 能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就 可以实现非常强大的功能. Core ...

  6. 集成Ehcache用来缓存表以后，怎么设置缓存刷新时间

    问答 集成Ehcache用来缓存表以后,怎么设置缓存刷新时间  发布于 217天前  作者 老司机  93 次浏览  复制  上一个帖子  下一个帖子  标签: 无 集成Ehcache用来缓存表以后, ...

  7. 【luogu P3609 [USACO17JAN]Hoof, Paper, Scissor蹄子剪刀布】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3609 ### 看着标签什么记搜什么暴力点进来,读完题第一直觉DP? 还真是个\(DP\). 题目所描述的状态 ...

  8. 借鉴一些关于js框架的东西

    八款Js框架介绍及比较,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools .moo.fx,componentartu ...

  9. vue的属性监听

    一.vue的监听 1.监听的例子 如: html:<input type="number" v-model="a" /> js: watch: { ...

  10. 牛客小白月赛1 G あなたの蛙は旅⽴っています【图存储】【DP】

    题目链接:https://www.nowcoder.com/acm/contest/85/G 思路: DP 空间可以优化成一维的, 用一维数组的 0 号单元保存左斜对角的值即可. 存图这里真不好理解 ...