实现邮箱验证简化版

需要 jQuery的jar包

直接上代码:

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的代码:

$(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类的代码:

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;

@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+"fsfs"+email);
        if(name!=null||email!=null){
            printWriter.println("登录成功!!");
//            resp.sendRedirect("index.jsp");验证是否登录成功:System.out.println("aaa");
        }else{
            printWriter.println("登录失败!!");
        }


    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }
}

效果:

来源：https://www.cnblogs.com/bichen-01/p/11688984.html

标签

验证邮箱

printwriter

实现邮箱验证 简化版

实现邮箱验证简化版