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. <已解决> Eclipse启动失败

    参考:http://stackoverflow.com/questions/15404964/starting-eclipse-results-in-failed-to-create-java-vir ...

  2. IOS Quarzt2D 手动的释放

    - (void)drawRect:(CGRect)rect { // 1.获取上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.绘制 ...

  3. codeforces 600C Make Palindrome

    要保证变化次数最少就是出现次数为奇数的相互转化,而且对应字母只改变一次.保证字典序小就是字典序大的字母变成字典序小的字母. 长度n为偶数时候,次数为奇数的有偶数个,按照上面说的搞就好了. n为奇数时, ...

  4. HTML 5.1 的 14 个新特性（含使用案例）

    HTML5 属于万维网联盟 (W3C), 这个组织为整个网络界提供了标准,如此形成的协议可在全世界通行.在 2016 年 11 月, W3C 对长期行使的 HTML 5 标准进行了更新,它是2年内的第 ...

  5. vue2.0在页面中自定义组件模块，以及页面与组件之间的数据传递

    1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错) <!DOCTYPE html> <html> <head> &l ...

  6. SpringBoot学习3：springboot整合filter

    整合方式一:通过注解扫描完成 Filter 组件的注册 1.编写filter package com.bjsxt.filter; import javax.servlet.*; import java ...

  7. es6中的promise解读

    目录 什么是promise? promise的优点 回调地狱问题  Promise的三种状态 一个简单的promise promise中的then 利用promise解决回调地狱 promise的链式 ...

  8. SPOJ1043 GSS1(线段树)

    题意 给出$n$个数,每次询问区间$(l, r)$内最大字段和 Sol 在合并子树的时候,答案仅有四种情况 打四个标记维护即可 查询同理,用类似update的方式合并 注意查询的时候不能按照以前的方式 ...

  9. Bzoj 1081 [Ahoi2009] chess 中国象棋

    bzoj 1081 [Ahoi2009] chess 中国象棋 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1801 状态比较难设,的确 ...

  10. maven引入dubbo包后启动报错

    启动后报错内容为: Caused by: org.springframework.beans.factory.BeanDefinitionStoreException: Unexpected exce ...