E-mail verification to achieve a simplified version

JQuery required jar package

Directly on the code:

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 ( " please contact the customer " )
                }
            })

        })

    })

</ Script > 
<% - user name and E-mail - %> 
< form Action = "" Method, = "POST" > 
    < the p- > 
        User Name: < the INPUT of the type = "text" name = "userName" the above mentioned id = "name" placeholder = "Please enter your user name" >  < span > * </ span >  < br /> 
    </ the p- > 
    < the p- > 
        E-mail: &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 code:

$(function () {


    $("[name=userName]").blur(function () {

        var userName =  $("[name=userName]").val();
        if(userName==null||userName==""){
            $ (This) .next (). Html ( "* User name can not be empty") .css ( "color", "red")
        }else{

            if(userName.length<4||userName>18){
                $ (This) .next (). Html ( "* Length of user name only between 4 and 18, including 4 and 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 ( "* E-mail can not be empty") .css ( "color", "red")
        }else{
            was 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 ( "* E-mail format is incorrect") .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 class code:

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 ( "successful login !!" );
 //             resp.sendRedirect ( "the index.jsp"); 
verify that the login is successful: 
System.out.println ( "AAA");
 
        } the else {
            PrintWriter.println ( "Login failed!" );
        }


    }

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

effect:

E-mail verification to achieve a simplified version

Guess you like