jsp+ajax实现无刷新(鼠标离开文本框即验证用户名)实现思路
前端 / 管理员 发布于 3年前 190
- 相关文章
- 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
- 在uni-app中使用Ucharts柱状图地步横向滚动条无法滑动解决方式(0个评论)
- 在vue中实现移动端双指放大或缩小功能代码示例(0个评论)
- jq中实现图片压缩、base64转成file后上传至服务器示例(0个评论)
- 在JavaScript中实现批量下载OSS中的文件代码示例(0个评论)
- 近期文章
- goose数据库迁移工具介绍及使用流程步骤(0个评论)
- 中国程序员“翻墙”为海外软件公司打工，105.8万工资被罚没！转知乎(0个评论)
- 在go语言gin框架中使用Sharding（Gorm分表中间件）实现分表流程步骤(0个评论)
- 在PHP提高性能方式之开启OPCache扩展及OPCache配置参数详解(0个评论)
- 在js的websocket客户端开发中遇到代码割裂情况解决方案(0个评论)
- Laravel框架中适用于Eloquent的日期过滤软件包：lara-date-filter(0个评论)
- Laravel 10.24版本发布(0个评论)
- go语言多项目批量更新依赖及自动调用jenkins构建流程步骤(0个评论)
- 在go语言中实现数学pow（x^y 的幂次）代码示例(0个评论)
- Laravel应用程序性能监控 (APM) 工具：Scout (0个评论)
- 近期评论
-
路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细，如果加个前端chatgpt对话页面就完美了.. -
博主 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 @ mashrdn 多切换几个节点测试，免费ssr是没那么稳.. -
mashrdn 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 V2rayn免费节点添加上去了，youtobe无法打开网页，是怎么回事.. -
张伟 在
科学上网翻墙之v2rayN-Core客户端免费公益节点使用教程中评论 3q！有用，不过免费节点隔天就要去git上复制新的导进去.. -
博主 在
科学上网翻墙访问Google , 上外网神器佛跳墙VPN(永久免费)使用流程步骤中评论 该篇教程已不能用了，告知大家，免的老有老铁问我！..
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"%>
<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());
}
%>
<%@ 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());
}
%>
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号
