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

平民王子 · 发表于 2013-2-8 00:48:30

使用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;}

		自动登录	找回密码
密码			立即注册