81,091
社区成员
发帖
与我相关
我的任务
分享如何实现注册时当用户名可以使用的时候,后边出现绿色的对勾提示
路过的朋友,我用java做一个用户注册的模块,是用ssh框架做的,见很多网站上注册时,当输完用户名时(假设此用户名可以使用)在鼠标移到下一个输入框时,用户名后边便即时出现了一个绿色的对勾,非常小,紧接着后边提示一句此用户名可以使用,如果错误则在其后边出现一个红色的圆点,现在我想实现一下这样的功能:后边提示我会做,特别是那个绿色的对勾和错误红点,怎么实现,请各位帮忙,谢谢啦!
...全文
请发表友善的回复…
发表回复
wyj1983 2008-12-03
- 打赏
- 举报
学习。。。
wuruijuan 2008-12-03
- 打赏
- 举报
标记，后备使用
xyz2011 2008-12-02
- 打赏
- 举报
用AJAX来实现，思路：
（1）：后台去校验是否存在
（2）：如果这个用户不存在那么在你的客户端就用AJAX来把从后台得到的信息比如说是：true吧，得到后用一些css的小技巧class="blue"把<div id="noId">图片信息</div>的颜色改变下就OK 了。
（3）：测试下吧。
思路就是这样的，网上有大量的AJAX的代码，拷贝些拿过就可以使用。
（1）：后台去校验是否存在
（2）：如果这个用户不存在那么在你的客户端就用AJAX来把从后台得到的信息比如说是：true吧，得到后用一些css的小技巧class="blue"把<div id="noId">图片信息</div>的颜色改变下就OK 了。
（3）：测试下吧。
思路就是这样的，网上有大量的AJAX的代码，拷贝些拿过就可以使用。
zhaibing 2008-12-02
- 打赏
- 举报
那个对勾和红点，要根据验证的结果，用JavaScript来换图片就行了。
steryzone 2008-12-02
- 打赏
- 举报
关注
zjc_love 2008-12-02
- 打赏
- 举报
在ajax的请求页面查询数据库判断用户是否已经存在
返回boolean值
然后innerHtml存在显示绿色 否则显示红色
返回boolean值
然后innerHtml存在显示绿色 否则显示红色
luckyt_boy 2008-12-02
- 打赏
- 举报
AJAX正是用来完成这些的，很好用
getdate 2008-12-02
- 打赏
- 举报
学习、、、
mldxs 2008-12-02
- 打赏
- 举报
ajax
rainbow560 2008-12-02
- 打赏
- 举报
学习了，下次试下
zhzhzhhh 2008-12-02
- 打赏
- 举报
这个就是用JS根据返回结果转换图片就好了么
西瓜 2008-11-30
- 打赏
- 举报
额。。见过.没做过
bruni 2008-11-30
- 打赏
- 举报
ajax, username输入框(text)的onblur时间, ajax提交到后台验证username是否合法.
如果合法,显示绿色的icon; 如果不合法, 显示红色的icon;
如果合法,显示绿色的icon; 如果不合法, 显示红色的icon;
laitaogood 2008-11-30
- 打赏
- 举报
AJAX做的
当光标离开那个文本框时，触发一个事件，异步请求后台判断是否存在该用户名
然后根据结果重写一个dom对象，比如添加一个什么图标之类的，更改字体颜色的都可以
当光标离开那个文本框时，触发一个事件，异步请求后台判断是否存在该用户名
然后根据结果重写一个dom对象，比如添加一个什么图标之类的，更改字体颜色的都可以
hejia12 2008-11-30
- 打赏
- 举报
[Quote=引用 1 楼 bruni 的回复:]
ajax, username输入框(text)的onblur时间, ajax提交到后台验证username是否合法.
如果合法,显示绿色的icon; 如果不合法, 显示红色的icon;
[/Quote]
的确是用ajax做...
ajax, username输入框(text)的onblur时间, ajax提交到后台验证username是否合法.
如果合法,显示绿色的icon; 如果不合法, 显示红色的icon;
[/Quote]
的确是用ajax做...
legend_jhz 2008-11-30
- 打赏
- 举报
标记一下以后用。
saiwu 2008-11-30
- 打赏
- 举报
AJAX现在的应用挺广的.路过学习下~~~~
抬头望远，低头沉思 2008-11-30
- 打赏
- 举报
当然这个博客楼主也可以参考一下
[Ajax]一个用Ajax做的用户名验证程序
[Ajax]一个用Ajax做的用户名验证程序
抬头望远，低头沉思 2008-11-30
- 打赏
- 举报
上面使用JSP+AJAX实现的验证用户名是否存在
抬头望远，低头沉思 2008-11-30
- 打赏
- 举报
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);
}
}
加载更多回复（8）
