实现邮箱验证 简化版

 

 

需要 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);
    }
}

 

 

效果:

 

 

posted @ 2019-10-16 22:49  AxeBurner  阅读(243)  评论(0)  编辑  收藏  举报