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,
<%@ page contentType="text/html; charset=utf-8"%> 
<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; 
<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" 
marginheight="0" marginwidth="0"> 
<table width="748" border="0" align="center" cellpadding="0" 
<td height="5"></td> 
<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  
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>"; 
<form name="name_form" method=post> 
<table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8" 
<td width="22%" height="20" align="right"> 
 User name:  
<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 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> 

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()); 

Related articles: