使用json，ajax，js实现用户名校验(信息校验与判重)

最新推荐文章于 2022-05-23 20:23:38 发布

jay编程

最新推荐文章于 2022-05-23 20:23:38 发布

阅读量326

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/weixin_45986454/article/details/111415775

版权

javaWeb 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

标题:使用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
}

参考blog：Ajax异步验证表单信息(信息校验和判重)，之后提交按钮才可点击

jay编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
使用json，ajax，js实现用户名校验(信息校验与判重)

标题:使用json，ajax，js实现用户名校验TestLoginAjaxAndJson .javapackage 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.HttpSe
复制链接

扫一扫