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

html 复制代码
<!DOCTYPE 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>
java 复制代码
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();
    }
}
相关推荐
天天扭码6 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder9 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang18 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao2 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui