jsp注册页面，Ajax实现验证用户名是否存在，密码是否一致，当不存在时，注册按钮变成灰色。

register.jsp页面信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
    <script type="text/javascript">
        function createXMLHttpRequest() {    //创建XMLHttpRequest
            try {
                return new XMLHttpRequest();            //直接创建对象，不适用与IE5,IE6
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");　　　//对于不适用的，创建合适的对象
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }
        function send() {
            var xmlHttp = createXMLHttpRequest();

            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState === 4 && xmlHttp.status == 200) {  //判断xmlHttp的状态是否完毕
                    if(xmlHttp.responseText == "true") {        //判断ajax从Servlet中返回的信息，即判断用户名是否存在。 
                        document.getElementById("Username_Error_Massage").innerHTML
                            = "<font color='red'>用户名已被注册！</font>";      //弹出警告信息，告知不可适用该用户名
                        document.all("register").disabled=true; 　//将注册按钮关闭，无法点击
                    }else {                 
                        document.getElementById("Username_Error_Massage").innerHTML
                            = "账号可用!";
                        document.all("register").disabled=false;　//开启注册按钮
                    }
                }
            };
            var method = "POST";        //定义传输方式
            var url="/Taobei/registerServlet?" + new Date().getTime();      　//定义对应的URL，为了避免浏览器的缓存造成干扰，加上时间戳
            xmlHttp.open(method, url, true);       
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var username = document.getElementById("username").value;
            if(username===undefined || username === null || username === ""){   //判断用户名是否为空
                alert("账号不能为空！");       // 弹出警告信息
            }
            xmlHttp.send("username=" + username);       //发送信息
        }
        function inspect_password() {       //判断两次用户名是否一致，不一致时，注册按钮不可使用
            if(document.getElementById("password01").value !=
                document.getElementById("password02").value){
                document.getElementById("div_password").innerHTML
                    = "<font color='red'>两次密码不一致</font>"
                document.all("register").disabled=true;
            }else {
                document.getElementById("div_password").innerHTML
                    = "密码一致！"
                document.all("register").disabled=false;
            }
        }
    </script>
</head>
<body>
<h1>欢迎来到注册页面</h1>
<hr>
<form action="/registerServlet" method="post">
    账号：<input type="text" name="username" id="username" onblur="send()"/>
    <span id="Username_Error_Massage"></span>
    <br/>
    
    密码：<input type="password" name="password" id="password01"/>
    <br/>
    重复密码:<input type="password" name="password_repeat" id="password02" onblur="inspect_password()"/>
    <span id="div_password"></span>
    <br/>
    
    邮箱：<input type="email" name="email"/><br/>
    <input type="submit" value="提交" name="register"/>
</form>
</body>
</html>
 
registerServlet的代码如下：

package Servlet;

import javax.management.Query;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by user on 17-7-20.
 * This Servlet suppport register page.
 */
@WebServlet(name = "registerServlet",value = "/registerServlet")
public class registerServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        
        if (username.equals("test")) {  //单纯测试，不进行连接数据库，，相同返回true
            response.getWriter().print(true);
        } else {        //不同返回false;
            response.getWriter().print(false);
        }
    }
}
 
最后结果如下：

posted @ 2017-08-05 21:43  过道  阅读(708)  评论(0)  编辑  收藏  举报