jsp+ajax实现无刷新鼠标离开文本框即验证用户名

末蓝、 2022-08-27 12:47 86阅读 0赞

欢迎大牛提意见![大笑][laugh.gif]

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>

[laugh.gif]: /images/20220824/619b903494674afd8a801c13da7ba7f3.png