2013/4/23 JQuery 中验证邮箱

最新推荐文章于 2021-10-20 22:11:23 发布

liang_jqzd

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量609

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/angtoutianwai/article/details/8841968

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>验证邮箱</title>
    <style type="text/css">
        .emailclass
        {
            background-color: #eee;
        }
    </style>
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var state = false;
        $(function () {
            ///聚焦

            $('#txtEmail').focus(function () {
                if (state == false) {
                    $(this).val('');
                }
            });

            //失焦
            $('#txtEmail').blur(function () {
                if ($(this).val() == '') {
                    $('span').text('邮箱不能为空，请重新输入！');
                    $('#txtEmail').trigger('focus'); //自动默认聚焦
                }
                else {
                    //正则邮箱验证 $(this).val()为文本框的值
                    if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($(this).val()) == true) {
                        $('span').text('');
                        $('span').append('<img src=onSuccess.gif/>');
                        state = true;
                    }
                    else {
                        $('span').text('');
                        $('span').text('格式错误，请重新输入！');
                        $(this).focus(); //自动默认聚焦
                    }

}

});

        })

    </script>
</head>
<body>
    邮箱:
    <input id="txtEmail" type="text" value="请输入邮箱名" class="emailclass" />
    <span id="spanTip"></span>
    <br />
    <br />
    电话:<input id="Text1" type="text" value="" />
</body>
</html>
------------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        var state = false;
        $(function () {
            ///聚焦

            $('#txtEmail').focus(function () {
                if (state == false) {
                    $(this).val('');
                }
            });

            $('#txtEmail').blur(function () {
                if ($(this).val() == '') {
                    $('span').text('邮箱不能为空，请重新输入！');
                    $('#txtEmail').trigger('focus'); //自动默认聚焦
                }
                else {
                    if (!chkemail($(this).val())) {
                        $('span').html('邮箱格式不正确');

                    }
                    else {
                        $('span').html('正确');
                        state = true;
                    }
                }
            });
        })
        function chkemail(stremail) {
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(stremail)) {
                return false;
            }
            else {
                return true;
            }
        }

    </script>
</head>
<body>
    邮箱:
    <input id="txtEmail" type="text" value="请输入邮箱名" class="emailclass" />
    <span id="spanTip"></span>
    <br />
    <br />
    密码:<input id="Text1" type="text" value="" />
</body>
</html>

liang_jqzd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2013/4/23 JQuery 中验证邮箱

http://www.w3.org/1999/xhtml"> 验证邮箱 .emailclass { background-color: #eee; } var state = false; $(function () {
复制链接

扫一扫