jQuery + Ajax 判断用户名是否存在、验证码是否正确

最新推荐文章于 2021-08-06 22:20:13 发布

GENNJI.

最新推荐文章于 2021-08-06 22:20:13 发布

阅读量1.3k

点赞数 4

分类专栏：开发问题文章标签： java jsp

本文链接：https://blog.csdn.net/satomiyo/article/details/83421247

版权

开发问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

java语言 idea2018 spring boot

jsp

<body>
<form action="<c:url value="/user/registerAction"/>" method="post">
    <label>
        <span>用户名：</span>
        <input id="userName" type="text" name="userName"/>
        <span class="notice" id="errorU"></span>
    </label>
    <label>
        <span>昵称：</span>
        <input id="nickname" type="text" name="nickname"/>
        <span class="notice" id="errorN"></span>
    </label>
    <label>
        <span>密码:</span>
        <input id="password" type="password" name="password"/>
    </label>
    <label>
        <span>重复密码:</span>
        <input id="passwordC" type="password" name="confirm"/>
        <span class="notice" id="errorC"></span>
    </label>
    <label>
        <span>验证码：</span>
        <input id="identify" type="text" name="identify"/>
        <img id="image1" src="<%=request.getContextPath()%>/identify/imageCreate">
        <span id="errorI"></span>
    </label>
    <input id="sub" type="submit" value="注册"/>
</form>
</body>

js、jquery

注：jquery.min.js 文件自行下载，并导入正确路径

<script src="../../resources/jquery.min.js"></script>
    <script>
        window.onload = function () {

            var flagC = 0;
            var flagU = 0;
            var flagI = 0;
            var flagN = 0;
            var oPassword = document.getElementById("password");
            var oPasswordC = document.getElementById("passwordC");
            var oErrorC = document.getElementById("errorC");
            var oUserName = document.getElementById("userName");
            var oNickname = document.getElementById("nickname");
            var oIdentify = document.getElementById("identify");
            var oSubmit = $("#sub");
            var oImage1 = document.getElementById("image1");
            checkNickname();

            oNickname.onchange = checkNickname;
            oPassword.onchange = checkConfirm;
            oPasswordC.onchange = checkConfirm;
            oUserName.onchange = checkUserName;
            oIdentify.onchange = checkIdentify;
            oImage1.onclick = reload;

            function submitFlag() {
                if (flagN + flagI + flagC + flagU === 4) {
                    oSubmit.attr("onclick", "return true");

                } else {
                    oSubmit.attr("onclick", "return false");
                }
            }


            function checkUserName() {
                $.ajax({
                    type: "GET",
                    url: "/user/checkUserName?userName=" + $("#userName").val(),
                    dataType: "text",
                    success: function (data) {
                        if (data === "true") {
                            flagU = 1;
                            $("#errorU").html("√").css("color", "green");
                        } else if (data === "false") {
                            flagU = 0;
                            $("#errorU").html("用户名已存在！").css("color", "red");
                        }
                        submitFlag();
                    },
                    error: function () {
                        $("#errorU").html("Error XMLHttpRequest");
                    }

                });

            }

            function checkConfirm() {
                if (oPassword.value === oPasswordC.value) {
                    flagC = 1;
                    oErrorC.style.color = "green";
                    oErrorC.innerHTML = "√";
                } else {
                    flagC = 0;
                    oErrorC.style.color = "red";
                    oErrorC.innerHTML = "两次密码输入不一致";
                }
                submitFlag();
            }

            function reload() {
                flagI = 0;
                submitFlag();
                oImage1.src = "<%=request.getContextPath()%>/identify/imageCreate?date=" + new Date().getTime();
                $("#identify").val("");   // 将验证码清空
                $("#errorI").html("");
            }

            function checkIdentify() {
                $.ajax({
                    type: "GET",
                    url: "${pageContext.request.contextPath}/identify/doIdentify?op=" + $("#identify").val(),
                    dataType: "text",
                    success: function (data) {
                        if (data === "true") {
                            flagI = 1;
                            $("#errorI").html("√").css("color", "green");
                        } else if (data === "false") {
                            flagI = 0;
                            
                            reload();
                        }
                        submitFlag();
                    },
                    error: function () {
                        $("#errorU").html("Error XMLHttpRequest");
                    }
                });
            }

            function checkNickname() {
                if (oNickname.value !== "") {
                    flagN = 1;
                    $("#errorN").html("√").css("color", "green");
                } else {
                    $("#errorN").html("昵称不能为空！").css("color", "red");
                    flagN = 0;
                }
                submitFlag();
            }

        }
    </script>

java Controller

(1) 用户名判断：

@Controller
@RequestMapping("user")
public class UserController {

    @RequestMapping(value = "checkUserName", method = RequestMethod.GET)
    @ResponseBody
    public void checkUserName(@RequestParam("userName") String name, HttpServletResponse response) throws IOException {
        response.setContentType("application/text; charset=utf-8");
        PrintWriter out = response.getWriter();
        try {
            if (userService.userNameCheck(name) == null) {
                out.write("true");
            } else {
                out.write("false");
            }
        } finally {
            out.close();
        }
    }

}

（2）验证码生成及判断：

@Controller
@RequestMapping("identify")
public class IdentifyController extends HttpServlet {
    
    /**
     * 生成验证码
     * @param request
     * @param response
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping("imageCreate")
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");

        BufferedImage bfi = new BufferedImage(120, 40, BufferedImage.TYPE_INT_RGB);
        Graphics g = bfi.getGraphics();
        g.fillRect(0, 0, 120, 40);

        //验证码字符范围
        char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".toCharArray();
        Random r = new Random();
        int index;
        StringBuffer sb = new StringBuffer(); //保存字符串
        for (int i = 0; i < 4; i++) {
            index = r.nextInt(ch.length);
            g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
            Font font = new Font("宋体", 30, 30);
            g.setFont(font);
            g.drawString(ch[index] + "", (i * 20) + 2, 23);
            sb.append(ch[index]);
        }

        // 添加噪点
        int area = (int) (0.02 * 120 * 40);
        for (int i = 0; i < area; ++i) {
            int x = (int) (Math.random() * 120);
            int y = (int) (Math.random() * 40);
            bfi.setRGB(x, y, (int) (Math.random() * 255));
        }

        //设置验证码中的干扰线
        for (int i = 0; i < 6; i++) {
            //随机获取干扰线的起点和终点
            int xstart = (int) (Math.random() * 120);
            int ystart = (int) (Math.random() * 40);
            int xend = (int) (Math.random() * 120);
            int yend = (int) (Math.random() * 40);
            g.setColor(interLine(1, 255));
            g.drawLine(xstart, ystart, xend, yend);
        }
        HttpSession session = request.getSession();  //保存到session
        session.setAttribute("verificationCode", sb.toString());
        ImageIO.write(bfi, "JPG", response.getOutputStream());  //写到输出流
    }

    private static Color interLine(int Low, int High) {
        if (Low > 255)
            Low = 255;
        if (High > 255)
            High = 255;
        if (Low < 0)
            Low = 0;
        if (High < 0)
            High = 0;
        int interval = High - Low;
        int r = Low + (int) (Math.random() * interval);
        int g = Low + (int) (Math.random() * interval);
        int b = Low + (int) (Math.random() * interval);
        return new Color(r, g, b);
    }

    /**
     * 得到验证码中的文字并存到session中
     * @param request
     * @param response
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping("doIdentify")
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        HttpSession session =request.getSession();
        String verificationCode = (String)session.getAttribute("verificationCode");
        String checkCode = request.getParameter("op").toUpperCase();

        PrintWriter out = response.getWriter();
        try {
            if (checkCode.equals(verificationCode.toUpperCase())) {
                out.write("true");
            } else {
                out.write("false");
            }
        } finally {
            out.close();
        }

    }

}