javascript,html,正则表达式，邮箱密码验证

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>邮箱密码验证</title>

        <style media="screen">

        *{

            margin: 0px;

            padding: 0px;

        }

        #wrap {

            width: 255px;

            height: 17px;

            display: none;

            position: absolute;

            top: 60px;

            left: 180px;

        }

        #wrap>p {

            width: 60px;

            height: 15px;

            line-height: 15px;

            text-align: center;

            display: inline-block;

            font-size: 0.8em;

            }

            form {

                margin: 20px;

            }

            span {

                font-size: 0.8em;

            }

　　　　#warning {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　}

　　　　#falseAlarm {
　　　　　　position: absolute;
　　　　　　top: 62px;
　　　　　　left: 50px;
　　　　　　display:none;
　　　　　　color:red;
　　　　}

        </style>

    </head>

    <body>

        <form class="" action="index.html" method="post">

            <span style="color:red">*</span><span>密码</span>

<input id="passWord" style="width: 300px;height:30px;border:1px solid lightgrey;"type="password" name="name" value="">

        </form>

        <span id="warning">6~16个字符，区分大小写</span>

        <span id="falseAlarm">密码长度应为6~16个字符</span>

        <div id="wrap">

                <p id="weak">弱</p>

                <p id="medium">中等</p>

                <p id="strong">强</p>

        </div>

    </body>

    <script type="text/javascript">

/*

            定义密码的规则

            1、密码长度位6～16位有效字符

            2、如果密码是纯数字、纯字母大写或者小写，则密码强大为弱

            3、密码中包含数字和字母的组合，则密码强度为中等

            4、密码中包含字母、大小写字母。下划线的组合密码强度为强

        */

        var passWord = document.getElementById("passWord");

        var wrap = document.getElementById('wrap');

        var weak = document.getElementById('weak');

        var medium = document.getElementById('medium');

        var strong = document.getElementById('strong');

        var warning = document.getElementById('warning');

        var falseAlarm = document.getElementById('falseAlarm');

        //添加键盘监听事件

        function addKeyEvent(event){

            event = event | window.event;

            var passcord = passWord.value;

            //密码强度为弱正则表达式

            var low = /(^\d{6,16}$)|(^[a-z]{6,16}$)|(^[A-Z]{6,16}$)|(^_{6,16}$)/g;

               //密码强度为中等正则表达式

            var middle = /(^[a-zA-Z]{6,16}$)|(^[a-z\d]{6,16}$)|(^[A-Z\d]{6,16}$)|(^[A-Z_]{6,16}$)|(^[_\d]{6,16}$)|(^[a-z_]{6,16}$)|(^[A-Z\d]{6,16}$)/g;

               //密码强度为强正则表达式

            var high = /(^[a-zA-Z\d]{6,16}$)|(^[a-zA-Z_]{6,16}$)|(^[a-z\d_]{6,16}$)(^[A-Z\d_]{6,16}$)|(^[a-zA-Z\d_]{6,16}$)/g;

            if (low.test(passcord)) {  //low.test(passcord) 如果满足low正则表达式，则返回true

                 wrap.style.display = "block";

                weak.style.color = "white";

                medium.style.color = "grey";

                strong.style.color = "grey";

                weak.style.background = "rgb(240,146,148)";

                medium.style.background = "rgb(228,228,228)";

                strong.style.background = "rgb(228,228,228)";

            } else if (middle.test(passcord)) {     //如果满足middle正则表达式，则返回true

                wrap.style.display = "block";   

                weak.style.color = "rgb(243,218,80)";

                medium.style.color = "white";

                strong.style.color = "grey";

               weak.style.background = "rgb(243,218,80)";

                medium.style.background = "rgb(243,218,80)";

                strong.style.background = "rgb(228,228,228)";

            } else if(high.test(passcord)){    //如果满足high正则表达式，则返回true

                wrap.style.display = "block";    

                weak.style.color = "rgb(76,173,79)";

                medium.style.color = "rgb(76,173,79)";

                strong.style.color = "white";

                weak.style.background = "rgb(76,173,79)";

                medium.style.background = "rgb(76,173,79)";

                strong.style.background = "rgb(76,173,79)";

            } else {

                wrap.style.display = "none"; //如果不满足正则方程则不会显示密码强度

            }

　　　　//假如输入密码位数超过16位，则会显示密码长度应为6~16个字符

            if (passcord.length >= 16) {

                warning.style.display = "none";

                falseAlarm.style.display = "block";

            } else {

　　　　//假如输入密码位数没超过16位，则会显示：6~16个字符，区分大小写

                warning.style.display = "block";

                falseAlarm.style.display = "none";

            }

        }

        passWord.addEventListener('keyup',addKeyEvent,false);

    </script>

</html>

效果如图所示：