<%@ 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();
}
}
}
分享到：
相关推荐
我们将探讨两种实现方法：一种是直接使用jQuery的GET方法，另一种是通过创建ASHX（HttpHandler）文件来处理请求。 首先，我们需要理解jQuery的AJAX基础。$.ajax()是jQuery提供的核心AJAX函数，可以处理各种类型的...
在这个项目中，"struts+jquery实现无刷新验证用户名是否存在"，主要是利用这两者来实现用户注册时的实时验证功能，避免用户提交重复或无效的用户名，提高用户体验。 首先，我们需要了解Struts2的Action类。在Struts...
jQuery AJAX 提供了一种异步的方式，使得客户端可以无刷新地与服务器进行交互，验证用户名是否已被占用。以下是对标题和描述中所述知识点的详细解释： 1. **jQuery AJAX**： jQuery 的 AJAX 方法允许开发者在不...
为了提供更好的用户体验，"Ajax实时验证用户名邮箱等是否已经存在"的技术被广泛应用。这种技术利用Ajax（Asynchronous JavaScript and XML）异步通信，能够在用户输入时即时检查数据库，无需刷新页面就能得到反馈。...
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能，以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互，以及JavaScript、jQuery库和HTTP请求的基本原理。 首先，...
本教程将深入探讨如何使用JQuery表单验证插件实现后天发送验证用户名是否存在的功能。 首先，我们需要理解JQuery的核心概念。JQuery允许我们通过选择器选取DOM元素，然后应用各种方法来操作这些元素。在表单验证中...
在ASP.NET中使用jQuery实现无刷新的验证用户名是否存在，是一种典型的AJAX应用，它通过异步请求与服务器交互，无需重新加载整个页面即可完成数据的校验，极大地提升了用户体验。以下是对这一知识点的详细解析： ###...
本文档将详细介绍如何使用JQuery库来实现一个简单的用户名验证功能。 #### 一、背景介绍 在实际项目中，经常需要对用户输入的数据进行验证，确保其符合预期格式或规则。例如，在注册页面上，需要检查用户名是否已...
在网页应用中，验证用户名是否已经存在是一项基本但至关重要的功能。这有助于确保用户注册时选择的用户名是唯一的，防止重名现象发生。jQuery，一个广泛使用的JavaScript库，提供了丰富的功能来简化前端交互，包括...
"ajax+jQuery+struts2验证用户名是否重复"的实现过程涉及到了几个关键的技术点，主要包括Ajax、jQuery和Struts2框架。下面将详细阐述这些技术及其在实际操作中的应用。 **1. Ajax（异步JavaScript和XML）** Ajax是...
综上所述，"jQuery验证用户名长度邮箱格式"涉及到的关键知识点包括：jQuery的事件处理（如`submit`、`keyup`、`input`）、DOM操作（如获取元素值、添加/移除类）、字符串长度检测、正则表达式用于邮箱验证以及实时...
在表单部分，定义了一个输入框用于输入用户名，并且为输入框指定一个ID，这样在JavaScript中可以通过这个ID来找到对应的元素，并应用验证规则。 ```html 用户名： <dd><input name="txtUserName" id=...
jQuery.validate是一个基于jQuery的表单验证插件，它可以简化前端表单的验证过程，提供丰富的验证规则和自定义错误消息。通过jQuery.validate，开发者可以轻松地实现诸如必填项检查、格式验证（如邮箱、电话号码）、...
在实现Ajax无刷新验证用户名存在的过程中，我们需要以下关键步骤： 1. **前端准备**： - 在HTML表单中，创建一个用于输入用户名的字段，例如`<input type="text" id="username" />`。 - 添加一个按钮或使用jQuery...
本文将深入探讨如何结合这三个技术实现无刷新验证用户名是否存在的功能。 Struts是一个基于MVC（Model-View-Controller）设计模式的Java Web框架，它帮助开发者更好地组织应用程序的结构，提高代码的可维护性和可...
用户名： 验证 <div id="result"></div> ``` 接下来，创建一个名为`validate.js`的JavaScript文件，用于处理用户名的验证。当用户点击提交按钮时，jQuery会捕获这个事件并阻止默认的表单提交行为。然后，...
**jQuery基础实例01——用户名...通过学习这个实例，初学者可以快速掌握jQuery的基本用法，并将其应用到更复杂的项目中。在后续的实例中，我们可以探索更多关于jQuery的功能，如Ajax异步通信、动画效果和插件使用等。
以上就是使用jQuery进行表单验证的基本知识，对于“百度注册页面”这样的应用场景，这些技巧将确保收集到的用户数据准确且有效。通过深入理解和实践，开发者可以创建出更健壮、更友好的注册流程。在压缩包中的文件...
在许多Web应用程序中，注册或登录时都需要验证用户名是否符合特定规则，例如长度限制、字符类型限制等。这个例子主要关注前端验证，确保用户在输入用户名时遵循这些规则。 **实现步骤** 1. **HTML结构**： 创建一...