jQuery练习t78

虾米大王 2021-01-15 15:11:02

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112669602

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 13px;
        }
        .divInit {
            width: 430px;
            height: 55px;
            line-height: 55px;
            padding-left: 20px;
        }
        .txtInit {
            border: 1px solid #666666;
            padding: 3px;
        }
        .spanInit {
            width: 179px;
            height: 40px;
            line-height: 40px;
            float: right;
            margin-top: 8px;
            padding-left: 10px;
            background-repeat: no-repeat;
        }

        .divBlur {
            background-color: #feeec2;
        }
        .txtBlur {
            border: 1px solid #666666;
            padding: 3px;
        }
        .spanBlur {

        }

        .divFocu {
            background-color: #eeeeee;
        }
        .spanSucc {
            background-color: #EEEEEE;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           $("#txtEmail").trigger("focus");
           $("#txtEmail").focus(function () {
               $(this).removeClass("txtBlur")
                   .addClass("txtInit");
               $("#email").removeClass("divBlur")
                   .addClass("divFocu");
               $("#spanTip").removeClass("spanBlur")
                   .removeClass("spanSucc")
                   .html("请输入邮箱地址！");
           });

           $("#txtEmail").blur(function () {
               var vTxt = $("#txtEmail").val();
               if(vTxt.length == 0)
               {
                   $(this).removeClass("txtInit")
                       .addClass("txtBlur");
                   $("#email").removeClass("divFocu")
                       .addClass("divBlur");
                   $("#spanTip").addClass("spanBlur")
                       .html("邮箱地址不能为空！");
               }
               else
               {
                   $(this).removeClass("txtBlur")
                       .addClass("txtInit");
                   $("#email").removeClass("divFocu");
                   $("#spanTip").removeClass("spanBlur")
                       .addClass("spanSucc").html("ok");
               }
           });
        });
    </script>
</head>
<body>
    <form id="form1" action="#">
        <div id="email" class="divInit">邮箱：
            <span id="spanTip" class="spanInit"></span>
            <input id="txtEmail" type="text" class="txtInit">
        </div>
    </form>
</body>
</html>