首页 > 代码库 > jsp+ajax实现无刷新鼠标离开文本框即验证用户名

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

2024-07-07 11:22:45   225人阅读

欢迎大牛提意见大笑

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>



联系
我们