form表单提交前判断-提示框（自定义美化提示框）

index.html：

    <form action="" method="post"  id="form1" enctype="multipart/form-data">
    <div class="box">
        <ul>
            <li>
                <div class="email">
                    <h1>寄给：</h1>
                    <input type="text" value="请输入邮箱..." id="email" name="email" placeholder="请输入邮箱..."  onfocus="if (value =='请输入邮箱...'){value =''}"
                           onblur="if (value ==''){value='请输入邮箱...'}">
                </div>
            </li>
            <div class="btn-3"><input type="button" id="btn_submit"  value="确认发送"></div>
        </ul>
    </div>
</form>
<div class="sucess"><img src="image/nimg37_1.png" alt="">&nbsp;&nbsp;邮件已发往未来</div>
<div class="send"><img src="image/load.gif" alt="">&nbsp;&nbsp;正在发送</div>
<div class="emailAlert">邮箱输入有误</div>

js:

    <script type="text/javascript">
        $('#btn_submit').click(function(){
            var email = document.getElementById("email").value;
            if (email == null || email.replace(/(^\s*)|(\s*$)/g, "") == "" || email == undefined) {
            } else {
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                isok = reg.test(email);
                if (!isok) {
                    showerror();
                    return false;
                }else{
                    showRequest();
                }
            }
        })
        $('.telLayer').click(function () {
            $('.emailAlert').hide(500);
        })
        function showRequest(){
            $('.send').addClass('animated bounceIn').fadeIn(2000, function () {
                $('.sucess').addClass('animated bounceIn').fadeIn(2000, function () {
                    document.getElementById("form1").submit();
                });

            });
            $('.emailAlert').hide();
        }
        function showerror(){
            $('.send').hide();
            $('.emailAlert').show();
        }
    </script>