先看客户端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;
}
相关推荐
在这个特定的场景中，我们看到的是一个利用这些技术进行用户名验证的实现。 首先，Struts2.1是Apache Struts框架的一个版本，它是一个基于Model-View-Controller（MVC）架构的Java Web应用框架。Struts2提供了丰富...
在这个"struts2.1+json+jquery用户名校验"项目中，我们重点关注的是如何利用这些技术进行前端与后端的数据交互，特别是关于用户名的验证。 首先，Struts2.1是一个基于MVC（Model-View-Controller）设计模式的Java ...
在本文中，我们将深入探讨如何使用JQuery进行实时的用户名校验，特别是在Web开发中，这一功能至关重要，能提供良好的用户体验。JQuery是JavaScript的一个强大库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务...
在这个基础实例中，我们将学习如何使用jQuery进行简单的用户名校验。 ### 一、jQuery简介 jQuery是由John Resig于2006年创建的，其核心理念是“Write Less, Do More”。它通过提供易于使用的API，简化了JavaScript...
使用Ajax和jQuery技术做的校验用户名的例子，。适合初学者参考
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能，以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互，以及JavaScript、jQuery库和HTTP请求的基本原理。 首先，...
当我们需要在客户端和服务器端同时校验用户名的可用性时，结合PHP和jQuery可以实现高效且用户体验良好的验证机制。 首先，让我们了解一下客户端验证。在用户输入用户名时，我们可以利用jQuery来实时检测用户名是否...
【Ajax实现二级下拉框与用户名校验】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。在本工程文件中，主要涉及到两个关键应用场景：二级下拉框的联动效果和...
在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...
"使用Ajax模拟用户名是否被占用"这一技术，正是为了提升用户体验而设计的。它允许用户在输入用户名时即时检查该用户名是否已被其他用户注册，无需每次输入后都提交整个表单进行验证。这种方式可以减少用户的等待时间...
JQuery用户名校验是指使用JQuery库来实现对网站用户输入的用户名进行验证，以确保用户名满足一定的条件，比如长度、是否包含非法字符等。JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、...
本文将介绍两种使用Ajax进行用户名校验的方法：传统的Ajax方式和jQuery的$.post方法。 ### 1. 传统Ajax方式 #### 步骤1：创建HTML表单 首先，在HTML页面中创建一个注册表单，包括用户名输入框、提交按钮等元素。...
使用JQuery的方式，在注册页面校验用户名是否已经存在，并作出提示。 我的博文中有预览图，博客路径：https://blog.csdn.net/qq_36654606/article/details/86650080
《jQuery的validate表单校验插件深度解析》 在前端开发中，表单校验是必不可少的一个环节，它能够确保用户输入的数据符合预设的规范，提高用户体验并减轻服务器端的压力。jQuery的validate插件作为一款强大的表单...
使用 jQuery Ajax 异步登录，并验证用户输入信息（maven），图文教程地址：https://blog.csdn.net/qq_40147863/article/details/85999375
"jQuery校验大全实例"是针对使用jQuery进行表单验证的一个综合资源，非常适合开发者学习和应用。这个压缩包可能包含了各种jQuery验证插件、代码示例以及详细的教程，旨在帮助开发者实现高效且用户友好的表单验证。 ...
最基本jquery校验用户名密码,表单提交用户
在本文中，我们将深入探讨如何使用jQuery的AJAX功能实现一个简单的登录系统，该系统能够实时检查用户名是否存在，而无需用户点击提交按钮或刷新整个页面。这种方法极大地提升了用户体验，因为用户可以即时得到反馈，...
在上述代码段中，首先定义了表单验证的函数，使用了jquery easyUI中的validatebox组件来对用户名和登录名进行校验。validatebox组件的配置项包括是否必填(required)、缺失时的提示信息(missingMessage)等。此外，对...