应用4-1 文本框内容检测（jQuery权威指南源码）

最新推荐文章于 2019-12-28 14:51:52 发布

yven_style

最新推荐文章于 2019-12-28 14:51:52 发布

阅读量357

点赞数

分类专栏： HTML CSS JavaScript

本文链接：https://blog.csdn.net/yangwen123222/article/details/78999434

版权

JavaScript 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

HTML

17 篇文章 0 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

描述：DOM加载完毕，文本框获取焦点（trigger）；失去焦点时会检测文本中的值，为空或者邮箱检测

code：

<!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>
    <title>文本框中的事件应用</title>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2-vsdoc.js">
    </script>
    <script type="text/javascript" 
            src="Jscript/jquery-1.4.2.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>

yven_style

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
应用4-1 文本框内容检测（jQuery权威指南源码）

描述：DOM加载完毕，文本框获取焦点（trigger）；失去焦点时会检测文本中的值，为空或者邮箱检测code：文本框中的事件应用 src="Jscript/jquery-1.4.2-vsdoc.js"> src="Jscript/jquery-1.4.2.js">
复制链接

扫一扫

专栏目录