[JQ权威指南]第十二天：使用Jquery事件改变文本框的样式

本文链接：https://blog.csdn.net/david_520042/article/details/48004181

(1)功能描述
    在页面中，创建一个用于输入邮箱地址的文本框，结合使用JQuery与CSS，实现当用文本框获取时样式发生变化，同时提示用户输入邮箱的方法。
    当用户在文本框中输入邮箱后，丢失焦点时，将检测其内容是否为空，如果不为空或邮箱格式不符，样式将再次发生变化，同时提示出错信息；如果输入正确，样式返回初始状态，并显示一个打勾的图片。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文本框中的事件应用</title>
<script type="text/javascript" src="../jquery-2.1.4.js">
</script>
<style type="text/css">
            body{font-size:13px} 
            /* 元素初始状态样式 */
            .divInit{width:390px;height:55px;line-height:55px;padding-left:20px}
            .txtInit{border:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input.gif')}
            .spnInit{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:#666 1px solid;padding:3px;background-image:url('Images/bg_email_input2.gif')}
            .spnBlur{background-image:url('Images/bg_email_wrong.gif')}

            .divFocu{background-color:#EDFFD5}/* div获取焦点样式 */
            .spnSucc{background-image:url('Images/pic_Email_ok.gif');margin-top:20px}/* 验证成功时span样式 */
</style>
<script type="text/javascript" >
         $(function() {
            $("#txtEmail").trigger("focus");//默认时文本框获取焦点

            $("#txtEmail").focus(function() {//文本框获取焦点事件
                $(this).removeClass("txtBlur").addClass("txtInit");
                $("#email").removeClass("divBlur").addClass("divFocu");
                $("#spnTip").removeClass("spnBlur")
                .removeClass("spnSucc").html("请输入您常用邮箱地址！");
            })

            $("#txtEmail").blur(function() {//文本框丢失焦点事件
                var vtxt = $("#txtEmail").val();
                if (vtxt.length == 0) {
                    $(this).removeClass("txtInit").addClass("txtBlur");
                    $("#email").removeClass("divFocu").addClass("divBlur");
                    $("#spnTip").addClass("spnBlur").html("邮箱地址不能为空！");
                }
                else {
                    if (!chkEmail(vtxt)) {//检测邮箱格式是否正确
                        $(this).removeClass("txtInit").addClass("txtBlur");
                        $("#email").removeClass("divFocu").addClass("divBlur");
                        $("#spnTip").addClass("spnBlur").html("邮箱格式不正确！");
                    } 
                    else {//如果正确
                        $(this).removeClass("txtBlur").addClass("txtInit");
                        $("#email").removeClass("divFocu");
                        $("#spnTip").removeClass("spnBlur").addClass("spnSucc").html("");
                    }
                }
            })
            /*
             *验证邮箱格式是否正确
             *参数strEmail，需要验证的邮箱
            */
            function chkEmail(strEmail) {
                if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {
                    return false;
                }
                else {
                    return true;
                }
            }
        })
</script>
</head>
<body>
   <form id="form1" action="#">
      <div id="email" class="divInit">邮箱：
           <span id="spnTip" class="spnInit"></span>
           <input id="txtEmail" type="text" class="txtInit" />
      </div>
   </form>
</body>
</html>