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

发布时间:2017-09-07 14:36:05
jsp+ajax实现无刷新,鼠标离开文本框即验证用户名 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() {

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,代码如下:

[java]

<%@ 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 { www.2cto.com

out.println("您的用户名可用");

}

} catch (Exception e) {

System.out.println(request.getServletPath() + " error : "

+ e.getMessage());

}

%>

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网页设计 https://www.feimao666.com


友情链接

独家出品

新闻由机器选取每5分钟自动更新

新闻搜索源于互联网新闻网站和频道,系自动分类排列,本站不刊登或转载任何完整的新闻内容