jsp+ajax實現無重新整理滑鼠離開文字框即驗證使用者名稱
阿新 • • 發佈：2019-02-12
歡迎大牛提意見
jsp+ajax實現無重新整理,滑鼠離開文字框即驗證使用者名稱，操作如下：新建一個輸入頁面，起名為input.jsp, [java] <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax實現無重新整理_滑鼠離開文字框即驗證使用者名稱</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .style1 { color: #FF3333; font-weight: bold; } .style14 { font-size: 13px } .text12black { font-size: 12px; } </style> </head> <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0"> <table width="748" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="5"></td> </tr> </table> <script language="javascript"> //建立XMLHttpRequest物件 function GetO() { var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new XMLHttpRequest(); } return ajax; } function getMyHTML(serverPage, objID) { var ajax = GetO(); //得到了一個html元素，在下面給這個元素的屬性賦值 var obj = document.all[objID]; //設定請求方法及目標，並且設定為非同步提交 ajax.open("post", serverPage, true); ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { //innerHTML是HTML元素的屬性，如果您不理解屬性那就理解為HTML元素的變數 //ajax.responseText是伺服器的返回值，把值賦給id=passport1的元素的屬性 //innerHTML這個屬性或說這個變量表示一組開始標記和結束標記之間的內容 obj.innerHTML = ajax.responseText; } } //傳送請求 ajax.send(null); } function CheckName() { //多個引數驗證[自己假設的，還未驗證] // url:"isExistCompany.do?company.companyName="+companyName+"&t="+new Date(), getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1"); } //這個函式的作用是當用戶的焦點從其他地方回到group_name這個輸入框時再給屬性賦回原內容 function sl(tx) { if(tx=='passport1') { document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 個字元 (包括大小寫字母,中文,數字,特殊字元等) 1個漢字等於2個字元，建議使用中文。註冊後不可修改。</div>"; } } </script> <form name="name_form" method=post> <table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8" class="text12black"> <tr> <td width="22%" height="20" align="right"> 使用者名稱： </td> <td width="61%" align="left"> <INPUT name="group_name" type="text" value="" size=30 style="float:left" maxlength="50" onBlur="javaScript:CheckName();" onFocus="return sl('passport1');" /> <br /> <div id="passport1" style="color: red"></div> </td> <td id="passport2" valign="top"> <div class="explain_blue" align='left'> <span class="gray">4-20 個字元 (包括大小寫字母,中文,數字,特殊字元等) 1個漢字等於2個字元，建議使用中文暱稱。註冊後不可修改。</span> </div> </td> </tr> </table> </form> </body> </html> 在新建一個校驗頁面，起名為check.jsp,程式碼如下： [java] <%@ page contentType="text/html; charset=utf-8"%> <% String action = ""; String groupname = ""; //檢查使用者名稱 //用作資料庫聯接，可以根據你的情況修改，如果為測試可以不用*作記號的語句 try { action = request.getParameter("action"); groupname = request.getParameter("groupName").trim(); // groupname=new String(request.getParameter("groupName").getBytes("iso8859-1"),"gb2312");//解決中文顯示亂碼問題 if ("".equals(groupname)) { out.println("<div class='reds' align='left'>使用者名稱不能為空！</div>"); } else if (groupname.length() < 4 || groupname.length() > 20) { out.println("<div class='reds' align='left'>使用者名稱" + groupname + "不合法！(長度為4到20位，且不能使用?#=等特殊字元)</div>"); } else if ("zhangsan".equals(groupname)) { out.println("<div class='reds' align='left'>" + "使用者名稱" + groupname + "已被佔用，請重新輸入！</div>"); } else { www.2cto.com out.println("您的使用者名稱可用"); } } catch (Exception e) { System.out.println(request.getServletPath() + " error : " + e.getMessage()); } %> 兩個div並層<div> <div style="float:left">左邊的第一個層</div> <div style="float:left">並排的層</div> </div>