jsp註冊頁面，Ajax實現驗證使用者名稱是否存在，密碼是否一致，當不存在時，註冊按鈕變成灰色。
阿新 • • 發佈：2019-02-07
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); } } } 最後結果如下：