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

最新推荐文章于 2023-05-07 16:04:19 发布

lgx06

最新推荐文章于 2023-05-07 16:04:19 发布

阅读量2.8k

点赞数

分类专栏： JavaEE 文章标签： ajax AJAX Ajax jsp Jsp JSP 校验

本文链接：https://blog.csdn.net/lengguoxing/article/details/8548825

版权

JavaEE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp,

<%@ 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()    { 
      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
							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,代码如下：

<%@ page contentType="text/html; charset=utf-8"%>
<%
	String action = "";
	String groupname = "";
	//检查用户名

	//用作数据库联接，可以根据你的情况修改，如果为测试可以不用*作记号的语句 

	try {

		action = request.getParameter("action");
		groupname = request.getParameter("groupName").trim();
		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 {
			out.println("您的用户名可用");
		}

	} catch (Exception e) {
		System.out.println(request.getServletPath() + " error : "
				+ e.getMessage());
	}
%>

lgx06

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名

jsp+ajax实现无刷新,鼠标离开文本框即验证用户名，操作如下：新建一个输入页面，起名为input.jsp, jsp+ajax实现无刷新_鼠标离开文本框即验证用户名 .style1 { color: #FF3333; font-weight: bold; } .style14 { font-size: 13px
复制链接

扫一扫