jquery+html写的邮箱和密码强度验证

最新推荐文章于 2021-06-28 11:32:56 发布

暗诡刺

最新推荐文章于 2021-06-28 11:32:56 发布

阅读量593

点赞数

分类专栏： javascript HTML

本文链接：https://blog.csdn.net/anxin591025/article/details/8840781

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #Text1 {
            background-color: #eee;
        }
        #Text2 {
            float:left;
            background-color: #eee;
        }
        .div2 {
            width:30px;
            height:10px;
            background-color:#eee;
        }
        tr {
            text-align: center;
            font-size:12px;
            color:#eee;
        }
        #div1 {
            width: 100px;
            position:relative;
            bottom:32px;
            left:160px;
        }
    </style>
    <script src="Jquery1.7.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#Text1').focus();
            var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            $('#Text1').bind({
                'focus': function () {
                }, 'blur': function () {
                    if (!/.+@.+\.[a-zA-Z]{2,4}$/.test($('#Text1').val())) {
                        $('#Text1').focus();
                    }
                }                
            });
            $('#Text1').keyup(function () {
                $('#label1').text(/.+@.+\.[a-zA-Z]{2,4}$/.test($('#Text1').val()) ? '邮箱可用' : '邮箱不可用');
            })
            $('#Text2').keyup(function () {
                if ($('#Text2').val().length > 16) {
                    $('#Text2').val($('#Text2').val().substr(0,16));
                }
                $('#div1 table tr:eq(0) td').css('color', '#eee');
                $('#div1 table tr:eq(1) td div').css('background-color', '#eee');
                if (/^[0-9]{8,12}$/.test($('#Text2').val()) || /^[a-z]{8,12}$/.test($('#Text2').val()) || /^[A-Z]{8,12}$/.test($('#Text2').val())) {
                    $('#div1 table tr:eq(0) td:eq(0)').css('color', '#000');
                    $('#div1 table tr:eq(1) td:eq(0) div').css('background-color', '#ff6a00');
                }
                else if (/^([0-9]|[a-z]){8,16}$/.test($('#Text2').val()) || /^([0-9]|[A-Z]){8,16}$/.test($('#Text2').val()) || /^[0-9]{12,16}$/.test($('#Text2').val()) || /^[a-z]{12,16}$/.test($('#Text2').val()) || /^[A-Z]{12,16}$/.test($('#Text2').val())) {
                    $('#div1 table tr:eq(0) td:lt(2)').css('color', '#000');
                    $('#div1 table tr:eq(1) td:lt(2) div').css('background-color', '#ff6a00');
                }
                else if (/^([0-9]|[a-z]|[A-Z]){10,16}$/.test($('#Text2').val())) {
                    $('#div1 table tr:eq(0) td').css('color', '#000');
                    $('#div1 table tr:eq(1) td div').css('background-color', '#33ff33');
                }
                else {
                    $('#div1 table tr:eq(0) td').css('color', '#eee');
                    $('#div1 table tr:eq(1) td div').css('background-color', '#eee');
                }
            })
        })
    </script>
</head>
<body>
    <input id="Text1" type="text" /><label id="label1"></label><br /><!--邮箱-->
    <input id="Text2" type="password" />
    <div id="div1">
        <table>
            <tr>
                <td>
                    弱
                </td>
                <td>
                    中
                </td>
                <td>
                    强
                </td>
            </tr>
            <tr>
                <td>
                    <div class="div2"></div>
                </td>
                <td>
                    <div class="div2"></div>
                </td>
                <td>
                    <div class="div2"></div>
                </td>
            </tr>
        </table>

    </div>
 
</body>
</html>