JQuery应用一：验证用户名

最新推荐文章于 2022-11-20 23:42:24 发布

fsgsdfghdfh

最新推荐文章于 2022-11-20 23:42:24 发布

阅读量104

点赞数

分类专栏： JQuery 文章标签： jQuery CSS JavaScript Ajax Cache ViewUI

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<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">
		<link rel="stylesheet" type="text/css" href="css/userVerify.css">
		<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
	</head>
	
	<script language="javascript">
  	$(document).ready(function(){
  		//对按扭注册点击事件
		$("#verfiyButton").click(function(){
			var username = $("#userVerify").val();
			if(username == ""){
				alert("用户名不能为空！");
			}else{
				//jquery的ajax请求：中文乱码问题：客户端两次encodeURI服务端URLDecoder.decode转码
				$.get("./UserVerifyServlet?username="+encodeURI(encodeURI(username)),null,function(result){
					$("#result").html(result);//servlet返回回来的是一个text
				});
			}
		});
		//文本框键盘事件
		$("#userVerify").keyup(function(){
			var userName = $(this).val();
			if(userName==""){
				$(this).addClass("userTest");
			}else{
				$(this).removeClass("userTest");
			}
		});
	});
  </script>

	<body>
		请输入用户名：
		<input type="text" id="userVerify" class="userTest">
		<input type="button" id="verfiyButton" value="校验">
		<div id="result"></div>
	</body>
</html>

userVerify.css内容如下：

.userTest{
	/**
	 *	控制文本框的边框是红色的实线
	 */
	border: 1px solid red;
	/**
	 *	设置文本框下方的图片
	 */
	background-image: url(../images/userVerify.gif);
	/**
	 * background-repeat：设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。
	 * repeat-x：背景图像在横向上平铺
	 * repeat-y：背景图像在纵向平铺
	 * repeat：背景图像在纵向和横向上平铺
	 * no-repeat：背景图像不平铺
	 **/
	background-repeat: repeat-x;
	/**
	 * background-position：设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
	 *						如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
	 * position：top | center | bottom | left | center | right 
	 **/
	background-position: bottom;
}

服务端如下：

public class UserVerifyServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = -3560090225939746250L;

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String username=URLDecoder.decode(request.getParameter("username"),"UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		try {
			if (username == null || username.length() == 0) {
				out.print("用户名不能为空！");
			} else {
				if (username.equals("张三")) {
					out.print("用户名[" + username + "]已注册！");
				} else {
					out.print("您可以使用[" + username + "]");
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			out.close();
		}
	}
}