ajax验证用户名是否存在与 rapid validate 的使用

最新推荐文章于 2024-08-27 15:59:17 发布

原创最新推荐文章于 2024-08-27 15:59:17 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #Struts #CSS #prototype #Microsoft

本文介绍了一个用户注册表单的设计与实现过程，重点在于如何利用AJAX技术进行实时用户名验证，确保用户输入的有效性和唯一性。此外，还讨论了如何通过JavaScript和CSS来增强用户体验。



<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>

注意[color=red]onreadystatechange，readyState，status[/color]大小写

后台



	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。