jsp ajax 验证用户名是否存在

最新推荐文章于 2023-07-20 12:01:56 发布

转载最新推荐文章于 2023-07-20 12:01:56 发布 · 3.5k 阅读

文章标签：

#jsp #验证 #用户名 #是否存在 #实时

JSP 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Ajax进行实时用户名检查的示例。通过前后端交互实现即时反馈，确保用户名符合要求且未被使用。

转用：http://yuncode.net/code/c_50568c9a1baf841

jsp前台 input.jsp

 
    <%@ page contentType="text/html; charset=GBK" %>
 
    <html>
 
    <style type="text/css">
 
    <!--
 
    @import url("../aqgc/style_c.css");
 
    -->
 
    </style>
 
    <head>
 
    <title>Ajax实例</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
    <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">
 
    <center>
 
    <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)
 
       {    //ajax.responseText是服务器的返回值，把值赋给id=passport1的元素的属性
 
       //innerHTML这个属性或说这个变量表示一组开始标记和结束标记之间的内容
 
        obj.innerHTML = ajax.responseText;
 
       }
 
      }
 
       //发送请求
 
    ajax.send(null);
 
      }
 
      function CheckGroupName()
 
      {
 
         getMyHTML("http://13.1.1.51:8080/ajax/check.jsp?groupName="+name_form.group_name.value, "passport1");
 
      }
 
      //这个函数的作用是当用户的焦点从其他地方回到group_name这个输入框时再给属性赋回原内容
 
    function sl(tx)
 
      {
 
       if(tx=='passport1')
 
      {
 
         document.all[tx].innerHTML = "<div class='explain_blue' align='left'>4-20 个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符，建议使用中文。注册后不可修改。</div>";
 
        }
 
      }
 
    function check()
 
    {
 
       if(document.name_form.group_name.value.length<1)
 
       {
 
        alert("请您给您的群组取个名字！");
 
         document.name_form.group_name.focus();
 
         return false;
 
        }
 
      if(!OK())
 
      {
 
        return false;
 
       }
 
      document.name_form.action='addgroup.do';
 
       document.name_form.target='_parent';
 
       document.name_form.submit();
 
      }
 
      function OK()
 
      {
 
       var obj = document.getElementById("passport1");
 
       if(obj.innerHTML.indexOf("可用")==-1)
 
       {
 
        return false;
 
        }
 
        return true;
 
      }
 
    </script>
 
    <form name="name_form" method=post>
 
      <td height="200" valign="top"><table width="100%" height="270" 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 maxlength="50" onBlur="javaScript:CheckGroupName();"
 
                onFocus="return sl('passport1');" /></td>
 
            <td id="passport1" valign="top"><div class="explain_blue" align='left'><span class="gray">4-20
 
                个字符 (包括大小写字母,中文,数字,特殊字符等) 1个汉字等于2个字符。</span></div></td>
 
          </tr>
 
        </table></td>
 
    </form>
 
    </BODY>
 
    </html>

jsp后台处理 check.jsp

 
    <%@ page contentType="text/html; charset=GB2312"%>
 
    <%@ page import="java.io.*"%>
 
    <%@ page import="java.sql.*"%>
 
    <%@ page import="javax.sql.DataSource"%>
 
    <%@ page import="javax.naming.InitialContext"%>
 
    <%@ page import="java.util.Properties"%>
 
    <%@ page import="java.util.Hashtable"%>
 
    <%@ page import="thtf.website.admin.CommonBean"%>
 
    <%
 
     String action = "";
 
            String groupname = "";
 
            // 检查用户名
 
            // 用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句
 
            InitialContext ctx = null;
 
            DataSource ds = null;
 
            Connection conn = null;
 
            Statement stmt = null;
 
            ResultSet rs = null;
 
            try {
 
                action = request.getParameter("action");
 
                groupname = request.getParameter("groupName").trim();
 
                if ("".equals(groupname)) {
 
                    System.out.println("null");
 
                    out.println("<div class='explain_blue' align='left'>用户名不能为空！</div>");
 
                } else if (groupname.length() < 4 || groupname.length() > 20) {
 
                    out.println("<div class='explain_blue' align='left'>用户名"
 
                            + groupname + "不合法！(长度为4到20位，且不能使用?#=等特殊字符)</div>");
 
                } else {
 
                    ctx = new InitialContext();
 
                    ds = (DataSource) ctx.lookup("java:/student");
 
                    conn = ds.getConnection();
 
                    stmt = conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
 
                            ResultSet.CONCUR_READ_ONLY);
 
                    String strsql = "select userinfo_name from personal_userinfo where userinfo_name='"
 
                            + groupname + "'";
 
                    rs = stmt.executeQuery(strsql);
 
                    if (rs.next()) {
 
                        out.println("<div class='explain_blue' align='left'>用户名"
 
                                + groupname + "已被占用，请重新输入！</div>");
 
                    } else {
 
                        out.println("您的用户名可用");
 
                    }
 
                }
 
            } catch (Exception e) {
 
                System.out.println(request.getServletPath() + " error : "
 
                        + e.getMessage());
 
            } finally {
 
                if (rs != null)
 
                    rs.close();
 
                if (stmt != null)
 
                    stmt.close();
 
                if (conn != null)
 
                    conn.close();
 
            }
 
    %>