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. js 生成随机数解决缓存的问题

    对于缓存有一个解决方法是在链接后添加随机数 例如登陆后跳转到链接/home,但是有缓存上次用户的登陆名,于是在/home后面加上一个随机数 var href = '/home?'+Math.rando ...

  2. 几个重要的开源视频会议SIP协议栈

    视频会议系统由于需要与不同的终端进行连接,因此我们需要视频会议终端遵循统一的协议,H.323协议是视频会议软件使用最广泛的协议栈,但H.323设计得较为复杂,用户在调用H.323协议过程较多,因此利用 ...

  3. log4j 配置文件 （XML/.properties）

    xml: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE log4j:configurat ...

  4. Return-to-dl-resolve浅析

    本文介绍一种CTF中的高级rop技巧-Return-to-dl-resolve,不久前的0CTF中的babystack和blackhole就用到了这个技巧. 预备知识 在开始本文前希望大家能预先了解一 ...

  5. cout对象一些常用方法的总结

    cout.precision(n); 这个方法的功能是,设置精度为n,返还值是上一次的设置精度. #include <iostream> using namespace std; int ...

  6. Angular2的笔记

    1.如果启动项目的时候出现下列黄色的警告说明电脑安装的全局cli和项目中使用的cli版本不一致,不过不影响使用,按它的提示执行 ng set --global warnings.versionMism ...

  7. API调用微信getWXACodeUnlimit()获取小程序码

    微信文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/qr-code/getWXACodeUnlimit.html? ...

  8. display :inline-block 处理点小障碍

    使用inline-block之前先处理点小障碍:inline-block元素会有4px左右的空隙,这个是因为我们写代码时候的换行符所致. 解决办法很简单:在inline-block的父元素中设置样式f ...

  9. 【jenkins】【java】【tomcat】windows host key verification failed

    适用于windows系统 出现这个问题的原因tomcat启动的用户找不到本地公私钥路径 如果tomcat 启动时候选择 local system account (默认此选项),请把你的公私钥文件(i ...

  10. django admin模块使用

    BBS之admin组件的使用 1.创建超级管理员 创建超级管理员 一. tools>>>>runmanagepyTask>>>>>createsu ...