需要 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> 邮箱: <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); } }
效果:
