jsp+ajax implementation without refreshing of mouse left the text box to verify the user name implementation idea
- 2020-06-01 10:47:58
- OfStack
jsp+ajax realizes no refresh, and the user name is verified when the mouse leaves the text box. The operation is as follows: create a new input page and name it input.jsp,
In the new validation page, name it check.jsp, and the code is as follows:
<%@ page contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>jsp+ajax Implement no refresh _ Mouse out of the text box to verify the user name </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">
// create XMLHttpRequest object
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();
// got 1 a html Element, assign the attribute of the element below
var obj = document.all[objID];
// Set the request method and target, and set it to submit asynchronously
ajax.open("post", serverPage, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//innerHTML is HTML The attribute of the element, if you don't understand the attribute, understand as HTML Variables of elements
//ajax.responseText Is the return value of the server, assign the value to id=passport1 Attributes of the element
//innerHTML This property or this variable represents 1 The content between the group start tag and the end tag
obj.innerHTML = ajax.responseText;
}
}
// Send the request
ajax.send(null);
}
function CheckName() {
getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1");
}
// This function is used when the user's focus is returned from somewhere else group_name This input box then assigns the property back to the original content
function sl(tx) {
if(tx=='passport1') {
document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 A character ( Including upper and lower case letters , Chinese , digital , Special characters, etc ) 1 Is equal to 2 It is recommended to use Chinese characters. It cannot be modified after registration. </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">
User name:
</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 A character ( Including upper and lower case letters , Chinese , digital , Special characters, etc )
1 Is equal to 2 Chinese nickname is recommended. It cannot be modified after registration. </span>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
In the new validation page, name it check.jsp, and the code is as follows:
<%@ page contentType="text/html; charset=utf-8"%>
<%
String action = "";
String groupname = "";
// Check the username
// As a database join, it can be modified according to your situation, but not for testing * A marked statement
try {
action = request.getParameter("action");
groupname = request.getParameter("groupName").trim();
if ("".equals(groupname)) {
out.println("<div class='reds' align='left'> Username cannot be empty! </div>");
} else if (groupname.length() < 4 || groupname.length() > 20) {
out.println("<div class='reds' align='left'> The user name "
+ groupname + " Illegal! ( Length of 4 to 20 Bit, and cannot be used ?#= Equal special character )</div>");
} else if ("zhangsan".equals(groupname)) {
out.println("<div class='reds' align='left'>" + " The user name "
+ groupname + " It has been occupied, please enter again! </div>");
} else {
out.println(" Your username is available ");
}
} catch (Exception e) {
System.out.println(request.getServletPath() + " error : "
+ e.getMessage());
}
%>