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

拼搏现实的明天。 2022-04-03 09:18 351阅读 0赞

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="">  邮件已发往未来</div>
    <div class="send"><img src="image/load.gif" alt="">  正在发送</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>

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts自定义tooltip提示框内容

最近做一个展示需要在显示的tooltip上加上单位。。。需要自定义tooltip提示框内容效果如下先看效果和代码设置： ![watermark_type_ZHJvaWRz

秒速五厘米/ 2023年10月03日 15:47/ 0 赞/ 21 阅读

相关 java 提示框判断,Java常用提示框

JOptionPane.showMessageDialog(this,"操作成功","提示",JOptionPane.INFORMATION\_MESSAGE); //提示框

谁借莪１个温暖的怀抱￠/ 2023年01月15日 08:06/ 0 赞/ 149 阅读

相关 java表单提交后弹出提示框_Spring如何处理表单提交

今天我们来讲一个最简单的表单提交处理的例子，通过提交一个表单给朋友打一声招呼！看这边文章之前，你至少应该了解基于Spring的Web开发的基础知识，当然，你还是应该准备好开

Dear 丶/ 2022年10月22日 14:54/ 0 赞/ 197 阅读

相关 PyQt实现自定义提示框（带三角形）

PopupWidget.py from PyQt5.QtCore import from PyQt5.QtGui import from PyQt

淡淡的烟草味﹌/ 2022年10月06日 01:58/ 0 赞/ 299 阅读

相关 form表单提交后弹框提示

jsp页面： <%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% Stri

冷不防/ 2022年07月11日 09:12/ 0 赞/ 489 阅读

相关 React Native 自定义实现【Toast】提示框

今天和大家分享一篇自定义View的内容。一、简介之前和大家分享的自定义View内容，我们知道自定义View一般分为三个步骤：（1）

曾经终败给现在/ 2022年06月06日 02:28/ 0 赞/ 957 阅读

相关自定义提示框鼠标悬停显示样式

需要完成的效果需要完成鼠标移到表格上显示详细信息，对显示信息的展示样式进行修改 -------------------- 效果图 ![这里写图片描述][70]

缺乏、安全感/ 2022年05月18日 04:51/ 0 赞/ 390 阅读

相关自定义AlertDialog消息提示框

自定义AlertDialog消息提示框，大家根据我的代码自行扩展。下图是威哥做的demo消息提示效果图： ![70][] 威哥不喜欢废话，直接上代码。 1、消息提示jav

川长思鸟来/ 2022年05月12日 02:50/ 0 赞/ 365 阅读

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

index.html： <form action="" method="post" id="form1" enctype="multipart/form-data"

拼搏现实的明天。/ 2022年04月03日 09:18/ 0 赞/ 352 阅读

相关消息框-提示框

今天找到一个非常简单的提示消息弹出框直接上代码 html ![1500786-20181012154016519-1839245572.png][] css

迷南。/ 2021年09月29日 23:38/ 0 赞/ 490 阅读