zoukankan      html  css  js  c++  java
  • 实现邮箱验证 简化版

    需要 jQuery的jar包

    直接上代码:

    index.jsp:

    index.jsp
    <%--
      Created by IntelliJ IDEA.
      User: admin
      Date: 2019/10/16
      Time: 21:43
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>实现验证邮箱</title>
        <script type="text/javascript"src="js/jquery.min.js"></script>
        <script src="js/yz.js"></script>
        <style>
            span{
    color: red;
            }
        </style>
    </head>
    <body>
    
    <script>
    
        $(function () {
    
            $("#a").click(function () {
    
                var name = $("#name").val();
                var email = $("#email").val();
                $.ajax({
    
                    type: "post",
                    dataType: "text",
                    url: "UserServlet",
                    data: {"name":name,"email":email},
                    success: function(data){
                        document.getElementById("b").innerHTML = data;
                    },
                    error: function(msg){
                        alert("请联系客户")
                    }
                })
    
            })
        })
    
    </script>
    <%--用户名和邮箱--%>
    <form action=""method="post">
        <p>
            用户名: <input type="text"name="userName"id="name" placeholder="请输入用户名"> <span>*</span> <br/>
        </p>
        <p>
            邮箱: &nbsp;&nbsp; <input type="text"name="email"id="email" placeholder="请输入邮箱"> <span>*</span> <br/>
        </p>
        <p>
            <input type="submit"value="登录"id="a">
        </p>
    </form>
    <div id="b"></div>
    
    </body>
    </html>

    yz.js的代码:

    yz.js
    $(function () {
    
    
        $("[name=userName]").blur(function () {
    
            var userName =  $("[name=userName]").val();
            if(userName==null||userName==""){
                $(this).next().html("*用户名不能为空").css("color","red")
            }else{
    
                if(userName.length<4||userName>18){
                    $(this).next().html("*用户名长度只能在4和18之间,包括4和18").css("color","red")
                }else{
                    $(this).next().html("√").css("color","green")
                }
    
            }
        })
        $("[name=email]").blur(function () {
    
            var email =  $("[name=email]").val();
            if(email==null||email==""){
                $(this).next().html("*邮箱不能为空").css("color","red")
            }else{
                var regex = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;
                if(regex.test(email)){
                    $(this).next().html("√").css("color","green")
                }else{
                    $(this).next().html("*邮箱格式不正确").css("color","red")
    
                }
    
            }
        })
    
        $("form").submit(function () {
            var s1 =  $("[name=userName]").next().text();
            var s2 =  $("[name=email]").next().text();
            if(s1=="√"&&s2=="√"){
                return true;
            }
            return false;
        })
    
    })

    UserServlet类的代码:

    UserServlet
    package servlet;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.regex.Pattern;
    
    @WebServlet("/UserServlet")
    public class UserServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
            req.setCharacterEncoding("utf-8");
            resp.setCharacterEncoding("utf-8");
            PrintWriter printWriter = (resp).getWriter();
            resp.setContentType("text/html;charset=UTF-8");
    
            String name = req.getParameter("name");
            String email = req.getParameter("email");
            System.out.println(name+" "+email);
            String regexEmail = "^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})";
            if(name==null||name==""||email==null||email==""){
                printWriter.println("姓名和邮箱不能为空");
            }else{
                if(name.length()<4||name.length()>18){
                    printWriter.println("登录失败!!!");
                    System.out.println("用户名长度在4和18之间,包括4和18");
                }else{
                    if(!email.matches(regexEmail)){
                        printWriter.println("登录失败!!!");
                        System.out.println("邮箱格式不正确");
                    }
                        System.out.println("success");
                    resp.sendRedirect("success.jsp");
                }
            }
    
    
    
    
    
        }
    
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            this.doGet(req,resp);
        }
    }

    效果:

  • 相关阅读:
    QWidget在QPopupMenu显示
    QTable中header高度
    在OpenSSL中添加自定义加密算法
    LibXML2不支持中文补遗
    基于arm+uClinux的嵌入式系统的开发
    关于嵌入式系统的启动
    在Qt/Embedded 2.3.8中添加MX21Ads键盘处理
    QT/Embedded 2.3.8 MX21ADS板移植
    Windows/Linux/Solaris 软中断处理机制
    RMI原理及实现
  • 原文地址:https://www.cnblogs.com/bichen-01/p/11688984.html
Copyright © 2011-2022 走看看