使用jQuery技术进行用户名校验

最新推荐文章于 2022-11-13 16:10:19 发布

原创最新推荐文章于 2022-11-13 16:10:19 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #CSS #Ajax #Servlet #JavaScript #ViewUI

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用jQuery技术实现的用户名校验案例。该案例通过客户端JavaScript代码与服务器端交互完成用户名是否存在数据库中的验证，并根据反馈结果显示不同的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery技术进行用户名校验

主要是在js代码中处理（做两件事）：

Button按下的时候要将文本框的数据获取到，并使用Ajax发送到服务器端判断，最后将服务器端返回来的数据填充到div中
文本框上，需要判断用户在文本框上输入的数据是不是为空，要是不为空，CSS的作用就得要取消

先看客户端jsp代码：

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>使用jQuery技术进行用户名校验</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript" src="js/userValidate.js"></script>
	<link rel="stylesheet" type="text/css" href="css/user.css">
  </head>
  
  <body>
              请输入用户名：<input type="text" name="userName" id="userName" class="userText">
              <input type="button" value="校验" id="validateButton">
              <div id="result"></div>
  </body>
</html>

userValidate.js代码

/*
 *要做两件事：
 * 1,Button按下的时候要将文本框的数据获取到，并使用Ajax发送到服务器端判断，最后将服务器端返回来的数据填充到div中 
 * 2,文本框上，需要判断用户在文本框上输入的数据是不是为空，要是不为空，CSS的作用就得要取消
 */

//页面一装载成功
$(document).ready(function(){
	//获取id=usernName的input节点
	var userNameNode = $("#userName");
	//为Button注册事件
	$("#validateButton").click(function(){
		//获取文本框的内容
		var userName = userNameNode.val();
		//接下来就是将这数据发送到服务器去处理
		if(userName == ""){
			alert("用户名不能为空！！");
		}else{
			$.get("ValidateServlet",$("#userName").serialize(),function(data,statusText){
				//$("#result").append(data);   //此处不能要这个，会叠加
				$("#result").html(data);
			});
		}
	});
	
	//为文本框注册事件
	userNameNode.keyup(function(){
		//获取文本框的内容
		var value = userNameNode.val();
		if(value == ""){
			userNameNode.addClass("userText");
		}else{
			userNameNode.removeClass("userText");
		}
	}); 
	
});

ValidateServlet代码

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ValidateServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		String username = request.getParameter("userName");
		
		if(username.equals("libinxuan")){
			out.println("此用户已存在，请重新输入！");
		}else{
			out.println("此用户数据库中不存在，你可以使用！");
		}
		
	}

}

CSS代码

@CHARSET "UTF-8";
.userText{
	/*用于控制文本框边框的CSS*/
	border: 1px solid red;
	background-image: url("../images/userVerify.gif");
	background-repeat: repeat-x;
	background-position: bottom;
}