标题:使用json,ajax,js实现用户名校验(信息校验与判重)
注意此注册按钮点不了,因为用户名已经存在
TestLoginAjaxAndJson .java
package cn.itcast.com.servlet;
import java.io.IOException;
import java.util.HashMap;
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 com.fasterxml.jackson.databind.ObjectMapper;
/**
* 测试一个登录案例,【使用ajax,json】
* @author dell
*
*/
@WebServlet(urlPatterns = "/TestLoginAjaxAndJson")
public class TestLoginAjaxAndJson extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Content-type","text/html;charset=utf-8");
String username = req.getParameter("username");
HashMap<String, Object> map = new HashMap<String,Object>();
/**
* {"userExist":true,"msg":"此用户名已经存在"}
{"userExist":false,"msg":"可用"}
*/
if(username.equals("jack")) {
map.put("userExist", true);
map.put("msg", "此用户名已经存在");
}else {
map.put("userExist", false);
map.put("msg", "可用");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(resp.getWriter(), map);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
login2.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册【ajax json】</title>
<script src="js/jquery-3.3.1.min.js"></script>
<!-- 实现校验 新加的-->
<script type="text/javascript" src="js/form.js"></script>
</head>
<body> <!-- onblur="checkAjax();" -->
<form action="index.html" onsubmit="return checkForm();">
用户名:<input type="text" id="username" name="username" placeholder="请输入用户名" onkeyup="checkUsername() ;"></input>
<span id="usernameMsg"></span><font color="#999999">字母数字下划线1到10位, 不能是数字开头</font><br/>
密码:<input type="password" name="password" placeholder="请输入密码"></input><br/>
<input type="submit" value="注册" id = "update" disabled > <!-- 提交,调用这个方法 -->
<div style="background-color:navy;width:100%;color:white"></div>
</form>
</body>
</html>
form.js
var usernameObj;
var usernameMsg;
var flag = false; //判断是否进行ajax
var aUsername = false; //ajax若判断此用户名合法,则设为true
//window.onload = function() { // 页面加载之后, 获取页面中的对象
// //选中输入的文本框标签
// usernameObj = document.getElementById("username");
//
// //选中显示内容的div标签
// usernameMsg = document.getElementById("usernameMsg");
//
//
// $("#username").blur(function(){
// //获取username文本输入框的值
// var username=$(this).val();
// $.get("TestLoginAjaxAndJson",{username:username},function(data){ //下面表明server返回的数据类型为json,此处表面获得了json,再获得某个键的值
// // alert(data);
// //判断userExist键的值是否为true
// var span=$("#usernameMsg"); //方便输出值
// if(data.userExist){
// if(!flag){ //说明输入合法
// span.css("color","red");
// span.html(data.msg);
// }
// }else{
// if(!flag){ //说明输入合法
// span.css("color","green");
// span.html(data.msg);
// aUsername = true;
// }
// }
// },"json");
// });
//};
window.onload = function() { // 页面加载之后, 获取页面中的对象
//选中输入的文本框标签
usernameObj = document.getElementById("username");
//选中显示内容的div标签
usernameMsg = document.getElementById("usernameMsg");
$("#username").blur(function(){
//获取username文本输入框的值
var username=$(this).val();
if(!flag){ //说明输入合法
$.get("TestLoginAjaxAndJson",{username:username},function(data){ //下面表明server返回的数据类型为json,此处表面获得了json,再获得某个键的值
// alert(data);
//判断userExist键的值是否为true
var span=$("#usernameMsg"); //方便输出值
if(data.userExist){
span.css("color","red");
span.html(data.msg);
$("#update").attr("disabled", true);
}else{
span.css("color","green");
span.html(data.msg);
aUsername = true; //说明ajax判断输入用户名没有重名
$("#update").removeAttr("disabled"); //取消按钮disabled 因为点击提交,才会调用整个表单,而此处删除disabled,则点不了提交表单
}
},"json");
}
});
};
/**
* 只要有一个事件位false,则提交表单失败,
* @returns
*/
function checkForm() { // 验证整个表单
var bUsername = checkUsername(); //用户名
var isTrue = bUsername && aUsername;
if(!isTrue){
alert("仔细核对");
$("#update").attr("disabled", true);
return false;
}
$("#update").removeAttr("disabled");
return true; // return false后, 事件将被取消
}
function checkUsername() { // 验证用户名
flag = false; //【重点】
var regex = /^[a-zA-Z_]\w{0,9}$/; // 字母数字下划线1到10位, 不能是数字开头
var value = usernameObj.value;// 获取usernameObj中的文本
var msg = ""; // 最后的提示消息, 默认为空
if (!value) // 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false
msg = "用户名必须填写:"; // 改变提示消息
else if (!regex.test(value)) // 如果用户名不能匹配正则表达式规则
msg = "用户名不合法:"; // 改变提示消息
usernameMsg.innerHTML = msg; // 将提示消息放入SPAN
//去掉这个 "选择器之类的"
usernameMsg.style.color = msg == "" ? "black" : "red"; // 根据消息结果改变tr的颜色
if(msg != ""){ //说明输入不合法,则ajax不需要发送请求,故flag设为true
flag = true;
}
return msg == ""; // 如果提示消息为空则代表没出错, 返回true
}