jsp+ajax實現無重新整理滑鼠離開文字框即驗證使用者名稱

來源:互聯網
上載者:User

標籤:c   style   class   blog   code   java   

歡迎大牛提意見

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> 


聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.