<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" rev="stylesheet" href="../css/input.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="../css/style_min.css"/>
<script type="text/javascript" src="../js/imageset.js"></script>
<script type="text/javaScript" src="../js/prototype_for_validation.js"></script>
<script type="text/javaScript" src="../js/validation_cn_UTF-8.js"></script>
<script type="text/javascript" src="../js/effects_for_validation.js"></script>
<style type="text/css">
.validation-advice {
margin: 0px 0;
padding: 0px;
margin-left: 10px;
color : #FF3300;
font-weight: bold;
display: inline;
}
</style>
<script type="text/javascript">
var req;
function createReq()
{
if(window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}if(window.ActiveXObject)
{
try
{
req=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e)
{
try
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
}
function checkName()
{
var name = document.getElementById("playerName").value;
var url="../playerBase/playerBase_verify.action?playerName=" + name;
createReq();
req.open("GET",url,true);
req.onreadystatechange = callback;
req.send(null);
}
function callback()
{
if(req.readyState == 4)
{
if(req.s[color=red]tatus[/color] == 200)
{
var message = req.responseText;
msgDiv = document.getElementById("msgDiv");
msgDiv.innerHTML = message;
}
}
}
</script>
</head>
<body>
<div id="input">
<form action="../playerBase/playerBase_save.action" class="required-validate"
method="post" enctype="multipart/form-data">
<table>
<tr>
<td>用户名称</td>
<td><input type="text" name="playerName" id="playerName" class="required" onchange="checkName()"></td>
<td><div id="msgDiv" class="validation-advice"></div></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="password" /></td>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="rePassword" id="rePassword" class="equals-password" /></td>
</tr>
<tr>
<td>用户昵称</td>
<td><input type="text" name="playerBase.playerNickname" class="required"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="playerBase.playerAge" class="int-range-0-100"/></td>
</tr>
<tr>
<td>性别</td>
<td>男<input type="radio" name="playerBase.playerGender" value="1">
女<input type="radio" name="playerBase.playerGender" value="o">
保密<input type="radio" name="playerBase.playerGender" value="2" checked>
</td>
</tr>
<tr>
<td>所属区域</td>
<td><select name="playerBase.serverGroupId">
<option value="1" selected>1区</option>
<option value="2">2区</option>
<option value="3">3区</option>
</select></td>
</tr>
<tr>
<td>肖像</td>
<td><input type="file" name="myFile" onchange="ShowImage(this.value)"/>
</td>
</tr>
<tr>
<td>图片预览</td>
<td>
<div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px;border:1px black"></div>
</td>
</tr>
</table>
<@s.hidden name="playerBase.playerId"/>
<input type="reset" name="reset" value="重填"/>
<input type="submit" name="submit" value="提交"/>
</form>
</div>
</body>
</html>
注意
onreadystatechange，readyState，status大小写
后台
private String playerName;
/**
* ajax的后台方法，验证用户名playerName是否被使用
*
* @throws IOException
*/
public void verify() throws IOException {
response.setContentType("text/html; charset=utf-8");
PrintWriter out = this.response.getWriter();
List result = playerBaseManager
.findByProperty("playerName", playerName);
if (result.size() > 0) {
out.append("<html>");
out.append("这个用户名已经被占用，请更换一个！");
out.append("</html>");
}
}
public String getPlayerName() {
return playerName;
}
public void setPlayerName(String playerName) {
this.playerName = playerName;
}
引入style_min.css，prototype_for_validation，effects_for_validation.js和validation_cn_UTF-8.js
其中，前2个直接使用，第3个是将原来的effects.js改名后使用，原因是effects.js这个名字已经存在了。最后一个是将原来的validation_cn.js转成UTF-8后改名，原因是validation_cn.js编码方式为“GBK”,而该编码方式应该与页面文件编码方式一致，否则验证提示信息为乱码。
然后form 中加入class="required-validate"，需要验证的加上相关的class。
特别说明，struts标签仿佛不认class属性，用html。
分享到：
相关推荐
### Ajax验证用户名是否存在示例详解 #### 一、概述 在Web开发中，为了提高用户体验，经常会在用户输入用户名时即时验证该用户名是否已经被其他用户注册。这种验证方式可以通过Ajax技术实现，即在用户输入的同时向...
本项目“Ajax验证用户名和密码”旨在利用Ajax实现一个动态、无刷新的用户登录验证系统，提高用户体验，特别是在Java后端的支持下。下面我们将深入探讨这个主题。 1. **Ajax基础** - Ajax的核心是JavaScript的...
本实例探讨了如何使用Asp.Net与Ajax技术相结合来实现一个功能，即检测用户名是否已存在于系统中，从而提供实时反馈给用户，提高用户体验。 首先，`Default.aspx`页面通常是用户界面，它包含一个用于输入用户名的...
本篇文章将深入探讨如何使用jQuery与AJAX技术来实现一个简单的用户名验证功能，以此来确保用户输入的用户名的独特性。这个过程涉及到前端与后端的交互，以及JavaScript、jQuery库和HTTP请求的基本原理。 首先，...
本教程将深入探讨如何使用JQuery表单验证插件实现后天发送验证用户名是否存在的功能。 首先，我们需要理解JQuery的核心概念。JQuery允许我们通过选择器选取DOM元素，然后应用各种方法来操作这些元素。在表单验证中...
在这个"AJAX 验证用户名"的示例中，我们将探讨如何使用AJAX技术来实时检查用户在注册或登录时输入的用户名是否可用。 首先，让我们了解AJAX的基本工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取数据，...
本话题将深入探讨AJAX如何实现用户名验证以及级联菜单的构建，这两项功能在现代网页应用中都非常常见。 ### AJAX验证用户名 **基本概念：** AJAX验证用户名通常用于注册或登录表单，以实时检查用户输入的用户名...
这一步骤通常涉及数据库查询操作，通过`memberService.findByUsername`方法检查用户名在数据库中是否存在。 4. **返回验证结果** 服务器端处理完毕后，需要将结果返回给前端。这可以通过设置`HttpServletResponse`...
在用户名验证场景中，当用户在输入框中输入用户名并失去焦点时，Ajax可以发送一个异步请求到服务器，服务器则会检查该用户名是否已存在，然后将结果返回给前端，前端根据返回的结果向用户显示相应的提示信息。...
本文将深入探讨如何利用Ajax来验证用户是否存在，以及在实际应用中的例子。 首先，理解Ajax的工作原理是必要的。Ajax的核心是JavaScript的XMLHttpRequest对象，它创建了一个到服务器的异步连接。通过这个连接，我们...
整个过程就是用户在输入用户名后，如果触发验证（例如点击提交按钮），jQuery.Validate插件会自动向服务器发送一个AJAX请求，服务器端的`ValidateUserName.ashx`处理程序需要编写相应的逻辑来检查用户名是否存在，并...
### Ajax实现异步刷新验证用户名是否已存在的具体方法知识点总结 #### 1. Ajax技术介绍 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与...
"validate 通用Ajax无刷新表单验证类"就是针对这一需求设计的，旨在提供一个高效、便捷的解决方案，使得在用户填写表单时能够实时进行数据验证，无需等待页面刷新，极大地提高了用户体验。 Ajax（Asynchronous ...
**Ajax用户名验证简例** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这个技术的核心在于JavaScript与服务器端的异步通信，使得用户体验更加流畅，...
一个简单的用户名验证可能包括检查用户名的长度、是否包含非法字符、是否已存在等条件。 例如，基本的用户名长度验证可以这样实现： ```javascript function validateUsername(username) { if (username.length |...
例如，服务器可能会检查数据库中是否存在重复的用户名，或者验证密码强度。 **四、AJAX与Validation** 在`validation.jsp`文件中，我们可能会看到一个包含AJAX调用的JSP页面，用于触发验证过程。这个页面可能包含...
后来有了Ajax，有了异步交互，当用户输完用户名继续填写其他信息的时候，Ajax就将信息发到了服务器去检查该用户名是否已经被注册了，这样如果用户名已经存在，不用等用户将所有数据都提交就可以给出提示。...