如何实现注册时当用户名可以使用的时候,后边出现绿色的对勾提示

路过的朋友,我用java做一个用户注册的模块,是用ssh框架做的,见很多网站上注册时,当输完用户名时(假设此用户名可以使用)在鼠标移到下一个输入框时,用户名后边便即时出现了一个绿色的对勾,非常小,紧接着后边提示一句此用户名可以使用,如果错误则在其后边出现一个红色的圆点,现在我想实现一下这样的功能:后边提示我会做,特别是那个绿色的对勾和错误红点,怎么实现,请各位帮忙,谢谢啦!

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

ajax, username输入框(text)的onblur时间, ajax提交到后台验证username是否合法.
如果合法,显示绿色的icon; 如果不合法, 显示红色的icon;
AJAX实现
我一般用jquery实现
AJAX
自己写个异步的js代码就可以了
jsp页面：<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
document.getElementById("message").innerHTML="<image src="">";
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
document.getElementById("message").innerHTML=res;
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 身份验证函数
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}</script><body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p><div id="message"></div>
密  码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>servlet：package classmate;import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginAction extends HttpServlet {public void init(ServletConfig config) throws ServletException {
}/*
* 处理<GET> 请求方法.
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
if(uname.equals("jenny") && psw.equals("hi")){
out.println("<res>" + "热烈的欢迎您!" + "</res>");
}else{
out.println("<res>" + "对不起,登录失败！" + "</res>");
}
out.println("</response>");
out.close();
}
/*
* 处理<POST> 请求方法.
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
上面使用JSP+AJAX实现的验证用户名是否存在
当然这个博客楼主也可以参考一下
[Ajax]一个用Ajax做的用户名验证程序
的确是用ajax做...
AJAX做的
当光标离开那个文本框时，触发一个事件，异步请求后台判断是否存在该用户名
然后根据结果重写一个dom对象，比如添加一个什么图标之类的，更改字体颜色的都可以
牛比
终于体会到AJAX的原理了
ajax:<table>
<tr>
<td>
员工编码：
</td>
<td>
<table border="0">
<tr>
<td>
<input type="text" name="empcode" size="15" class="text"
onpropertychange="checkEmpCode();" />
</td>
<td>
<div id="empdiv"></div>
</td>
</tr>
</table>
</td>
</table> </tr>
var XMLHttpReq = null;
var empcodeflag = false;
var checkcodeflag = false;

//创建XMLHttpRequest对象
     function createXMLHttpRequest() {
        if(window.XMLHttpRequest) { //Mozilla 浏览器
            XMLHttpReq = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) { // IE浏览器
            try {
                XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
     } //发送请求函数
function checkEmpCode(){

var empcode = document.forms[0].empcode.value;

createXMLHttpRequest();
XMLHttpReq.onreadystatechange = checkFinsh;

var url = "checkempcode?empcode="+document.forms[0].empcode.value;
XMLHttpReq.open("post",url , true);
XMLHttpReq.send(null);
}

//处理返回响应函数
function checkFinsh(){
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
if(XMLHttpReq.responseText.indexOf("already exist!") != -1)
{
//员工编码已存在
document.getElementById("empdiv").innerHTML="<font color=\"#ff0000\">该员工编码已存在</font>";
document.getElementById("submit").innerHTML="<input type=\"submit\" value=\" 注册 \" disabled=\"disabled\"/>";
empcodeflag = false;
}
else
{
document.getElementById("empdiv").innerHTML="<font color=\"#ff0000\">该员工编码可以注册</font>";
empcodeflag = true;
if(empcodeflag==true && checkcodeflag==true)
{
document.getElementById("submit").innerHTML="<input type=\"submit\" value=\" 注册 \" onclick=\"return checkForm(this.form);\"/>";
}
}
} else {
alert("error data:\n"+ XMLHttpReq.statusText);
      }
    }
}
那个对勾和红点，要根据验证的结果，用JavaScript来换图片就行了。
用AJAX来实现，思路：
（1）：后台去校验是否存在
（2）：如果这个用户不存在那么在你的客户端就用AJAX来把从后台得到的信息比如说是：true吧，得到后用一些css的小技巧class="blue"把<div id="noId">图片信息</div>的颜色改变下就OK 了。
（3）：测试下吧。
思路就是这样的，网上有大量的AJAX的代码，拷贝些拿过就可以使用。
AJAX正是用来完成这些的，很好用
在ajax的请求页面查询数据库判断用户是否已经存在
返回boolean值
然后innerHtml存在显示绿色否则显示红色