注册页面对数据进行校验，Ajax的使用-数据唯一性


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title>
    <script src="js/jquery-3.7.0.js">script>
    <script>
        $(function () {
            var username_flag = false;
            var password_flag = false;
            //用户输入框失去焦点
            $("[name=username]").blur(function () {
                //获取输入框的值
                var usernameValue = $(this).val();
                //判空
                if (usernameValue == null || usernameValue == "") {
                    $("#span1").text("账号不能为空");
                } else {
                    //判长度
                    if (usernameValue.length < 5) {
                        $("#span1").text("账号不能少于5位");
                    } else {
                        //判断账号的唯一性
                        $.get("LoginServlet",{"username":usernameValue},function (date) {
                            console.log(date)
                            if (date) {
                                $("#span1").text("√");
                                $("#span1").css("color","green");
                                username_flag = true;
                            } else {
                                $("#span1").text("此账号已被注册过！请重新输入");
                            }
                        },"json");
                    }
                }
            });
            //密码输入框失去焦点
            $("[name=password]").blur(function () {
                var passwordValue = $(this).val();
                //判空
                if (passwordValue == null || passwordValue == "") {
                    $("#span2").text("密码不能为空");
                } else {
                    //判长度
                    if (passwordValue.length < 5) {
                        $("#span2").text("密码不能少于5位");
                    } else {
                        //判内容
                        var rule = /^\d*$/;
                        if (rule.test(passwordValue)) {
                            $("#span2").text("密码不能是纯数字");
                        } else {
                            $("#span2").text("√");
                            $("#span2").css("color","green");
                            password_flag = true;
                        }
                    }
                }
            });
 
            $("form").submit(function(){
                if(username_flag && password_flag){
                    alert("提交成功")
                    return true;
                }else{
                    alert("数据有误！")
                    return false;
                }
            });
 
        });
    script>
head>
<body>
<form>
    用户名：<input type="text" name="username"><span id="span1" style="color: red">span><br>
    密码：<input type="password" name="password"><span id="span2" style="color: red">span><br>
    <input type="submit" value="登录">
form>
body>
html>


package com.etime.servlet;
 
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
 
@WebServlet(name = "LoginServlet", value = "/LoginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取名字
        String username = request.getParameter("username");
        boolean flag;
        //假设数据库只有admin用户
        if ("admin".equals(username)){
            //用户已经存在
            flag = false;
        } else {
            //用户不存在
            flag = true;
        }
        PrintWriter writer = response.getWriter();
        writer.print(flag);
        writer.close();
    }
}

相关阅读:
RN搜索高亮显示
 Gateway微服务路由使微服务静态资源加载失败
 第六篇基于JSP 技术的网上购书系统——网站新闻、网站新闻阅读功能实现（网上商城、仿淘宝、当当、亚马逊）
2023秋招感悟
 java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis
基于QT实现的图形学绘制系统文档+项目源码及可执行EXE文件+系统使用说明书
 【网络篇】如何给虚拟机添加网卡，设置固定ip
servlet开发-通过Tomcat部署一个简单的webapp
深入分析Spring的IoC容器：从底层源码探索
 2022.07.31(LC_6133_分组的最大数量)
原文地址：https://blog.csdn.net/weixin_62971115/article/details/132676442