zoukankan      html  css  js  c++  java
  • DOM案例【3】密码强度检查案例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>注册页面</title>
        <style type="text/css">
    
            #table td{
                width:40px;
                height:19px;
                background-color:#F3F3F3;
                border:1px solid #D0D0D0;
                color:#BBBBBB;
                line-height:9px;
            }
    
        </style>
    </head>
    <body>
        <form>
    
            <label for="password">密码:</label>
            <input id="password" type="password" name="password" />
            <table id="table" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
              <tr align="center">
                <td id="td1"></td>
                <td id="td2"></td>
                <td id="td3"></td>
              </tr>
            </table>
    
        </form>
    </body>
    </html>
    <script type="text/javascript">
    
        /*
        密码强度规则:
        弱:强度为1,密码长度小于6个就是弱
        中:强度为2,除了弱和强之外都属于中
        强:强度为3,密码长度大于或者等于8个,并且包含数字、小写字母和大写字母
         */
    
        //什么时候检查密码的强度
    
        //声明一个函数专门检查密码的强度
        function checkPassword(value){
            if(!value){
                return 1;
            }
            if(value.length<6){
                return 1;
            }
            if(value.length>=8 && value.match(/[0-9]/) && value.match(/[a-z]/) && value.match(/[A-Z]/) ){
                return 3;
            }
    
            return 2;
        }
    
        //1 创建一个定时器,每个100毫秒检查一下密码的强度
        setInterval(function(){
            var passwordElement = document.getElementById("password");
    
            var passwordLevel = checkPassword(passwordElement.value);
    
            //2 如果检查结果是弱,就改变弱单元格的背景色...
            switch (passwordLevel){
                case 1:{
                    document.getElementById("td1").style.backgroundColor="#ff8040";
                    document.getElementById("td2").style.backgroundColor=null;
                    document.getElementById("td3").style.backgroundColor=null;
                    break;
                }
                case 2:{
                    document.getElementById("td1").style.backgroundColor="#ffff6f";
                    document.getElementById("td2").style.backgroundColor="#ffff6f";
                    document.getElementById("td3").style.backgroundColor=null;
                    break;
                }
                case 3:{
                    document.getElementById("td1").style.backgroundColor="#a8ff24";
                    document.getElementById("td2").style.backgroundColor="#a8ff24";
                    document.getElementById("td3").style.backgroundColor="#a8ff24";
                    break;
                }
            }
    
        },100);
    
    </script>
  • 相关阅读:
    Spring学习总结之高级装配
    Spring学习总结之装配bean
    NS2安装过程中环境变量设置的问题(ns-2.35)
    =======================分割线======================================
    java的内存管理机制
    Python之面向对象编程
    Python之列表生成式
    Python之函数的参数
    Git基础级介绍
    第四次作业——个人作业——软件案例分析
  • 原文地址:https://www.cnblogs.com/lolitagis02/p/8282546.html
Copyright © 2011-2022 走看看