欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-20 20:03:16
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名,操作如下:新建一个输入页面,起名为input.jsp, 复制代码 代码如下: <%@ page content...
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());
}
%>