<!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 {
//判內(nèi)容
var rule = /^\d*$/;
if (rule.test(passwordValue)) {
$("#span2").text("密碼不能是純數(shù)字");
} else {
$("#span2").text("√");
$("#span2").css("color","green");
password_flag = true;
}
}
}
});
$("form").submit(function(){
if(username_flag && password_flag){
alert("提交成功")
return true;
}else{
alert("數(shù)據(jù)有誤！")
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;
//假設(shè)數(shù)據(jù)庫只有admin用戶
if ("admin".equals(username)){
//用戶已經(jīng)存在
flag = false;
} else {
//用戶不存在
flag = true;
}
PrintWriter writer = response.getWriter();
writer.print(flag);
writer.close();
}
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-703626.html
文章來源：http://www.zghlxwxcb.cn/news/detail-703626.html
到了這里，關(guān)于注冊頁面對數(shù)據(jù)進行校驗，Ajax的使用-數(shù)據(jù)唯一性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[設(shè)計模式Java實現(xiàn)附plantuml源碼~創(chuàng)建型] 確保對象的唯一性～單例模式](https://imgs.yssmx.com/Uploads/2024/01/805493-1.png)
