使用jquery实现判断用户名是否存在的实例-优快云博客

本文介绍如何利用jQuery实现一个简单的用户名验证功能，包括后端Servlet处理和前端表单交互，涉及用户输入验证、服务器请求及响应处理。

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

使用jquery实现判断用户名时候存在的实例

首先准备后台服务器的代码：用的是servlet

user.java代码如下：

package com.sj.jquery; /* * To change this template, choose Tools | Templates * and open the template in the editor. */ import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @SuppressWarnings("serial") public class User extends HttpServlet { protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); try { String param = request.getParameter("username"); if (param == null || param.length() == 0) { out.println("用户名不能为空"); } else { String username = URLDecoder.decode(param, "UTF-8"); if (username.equals("wangxingkui")) { out.println("用户名[" + username + "]已经存在，请使用别的用户名注册"); } else { out.println("可以使用用户名[" + username + "]注册"); } } } finally { out.close(); } } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } public String getServletInfo() { return "Short description"; } }

web.xml代码如下：

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>UserVerify</servlet-name> <servlet-class>com.sj.jquery.User</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserVerify</servlet-name> <url-pattern>/UserVerify</url-pattern> </servlet-mapping> </web-app>

这里就不多介绍了，

接下来编写jquery代码：

myjs.js代码如下

/*需要javascript 代码两件事情 * * * **/ $(document).ready(function (){ //需要找到当前按钮注册事件 var usernameNode = $("#username"); $("#button").click(function (){ //获取文本框的内容 var username =usernameNode.val(); //将这个内容发送给服务器 if(username=="" ){ alert("用户名不能为空"); }else { $.get("http://localhost:8080/jquery1/UserVerify?username="+ encodeURI(encodeURI(username)),null,function(response){$("#di").html(response); //3.接收服务器端返回的数据，填充到div中 }); } //接受服务器返回的数据 }); //需要找到文本框 usernameNode.keyup(function(){ //获取当前文本框中的内容 var value = usernameNode.val(); if (value == "") { //让边框变成红色，并且带背景图 usernameNode.addClass("userText"); } else { //去掉边框和背景图 usernameNode.removeClass("userText"); } }); });

css.css代码如下：

.userText{ /*控制文本框的红色*/ border: 1px solid red; background-image: url(../images/userVerify.gif); background-repeat: repeat-x; background-position: bottom; }

前台页面代码index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户注册系统</title> <mce:script type="text/javascript" src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script> <mce:script type="text/javascript" src="js/myjs.js" mce_src="js/myjs.js"></mce:script> <link type="text/css" rel="stylesheet" href="css/css.css" mce_href="css/css.css"> </head> <body> 请输入用户名：<input type="text" id="username" class="userText"> <input type="button" value="校验" id="button"> <div id="di"></div> </body> </html>