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

前端技术 2023/09/04 JSP
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());
}
%>

本文地址：https://www.stayed.cn/item/9216

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案