注册页面实现

最新推荐文章于 2022-07-01 17:36:39 发布

爽朗的琪琪

最新推荐文章于 2022-07-01 17:36:39 发布

阅读量713

点赞数

<%@ page language="java" pageEncoding="UTF-8"%>

<html>
<head>
<title>Ajax应用</title>
</head>
<script type="text/javascript">




window.onload = function(){
   //通过ID或名字获取每个对象
	var usernameObj = document.getElementById("user");
	var passwordObj = document.getElementById("psw");
	var confirmObj = document.getElementById("confirm");
	var birthdayObj = document.getElementById("birthday");
	var genderArr = document.getElementsByName("gender");
	var interestArr = document.getElementsByName("interest");
	var cityObj = document.getElementById("city");
	
	设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法
	usernameObj.onblur = Usernamecheck;
	passwordObj.onblur = checkPassword;
	confirmObj.onblur = checkConfirm;
	emailObj.onblur = checkEmail;
	birthdayObj.onblur = checkBirthday;
	genderArr.onblur = checkGender;
	interestArr.onblur = checkInterest;
	cityObj.onblur = checkCity;
	
	
	
	
	
}
function trim(s){//去除空格
	   return s.replace(/^\s+|\s+$/g,"");
	  }
var xmlHttp;
//创建XMLHttpRequest对象
function createHttpRequest(){
		if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	else if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}
}
var userflag=true;
function Usernamecheck(){

	//得到用户填写的学号
	var xh= document.getElementById("user");
    var usernameValue=trim(xh.value);
    var usernameRegex = /^[a-zA-Z_]\w{0,9}$/;
    if(usernameValue == null || usernameValue == ""){
	//如果为空
		userdiv.innerHTML="<font color='red' size='1pt'>用户名不能为空</font>";
		userflag=false;
		return false;
		
	}
	else if(!usernameRegex.test(usernameValue)){
		userdiv.innerHTML="<font color='red' size='1pt'>用户名格式不正确</font>";
		userflag=false;
		return false;
		
	}
	
	createHttpRequest();
	//将状态触发器绑定到一个函数

	xmlHttp.onreadystatechange = processor;
	//通过get方法向指定的URL即Servlet对应URL建立服务器的调用
	xmlHttp.open("get","CheckUser?xh="+usernameValue);
	//发送请求
	xmlHttp.send(null);
	return;
	function processor(){
		var responseContext;
		//如果响应完成
		if(xmlHttp.readyState == 4){
		//如果返回成功
			if(xmlHttp.status == 200){
			//取得响应内容
				responseContext = xmlHttp.responseText;
				//如果注册名检查有效
				if(responseContext.indexOf("true")!=-1){
					userdiv.innerHTML="<font color='green' size='1pt'>用户名可用</font>";
					userflag=true;
				}else{
					userdiv.innerHTML="<font color='red' size='1pt'>用户名已存在</font>";
					userflag=false;
					
				}
			}
		}	
	}
}

//处理状态改变函数

function checkPassword(){
	var ps=psw.value;
	var passwordRegex = /^\w{6,10}$/;
	if(ps == null || ps == ""){
		pswnote.innerHTML="<font color='red' size='1pt'>密码不能为空</font>";
		return false;
	}
	 if (!passwordRegex.test(ps)) {
	 pswnote.innerHTML="<font color='red' size='1pt'>密码长度至少六位</font>";
	 return false;
	}
	pswnote.innerHTML="<font color='green' size='1pt'>输入正确</font>";
	return true;
}

function checkConfirm(){
	var confirmObj = document.getElementById("confirm");
	var passwordObj = document.getElementById("psw");
	var confirmValue = confirmObj.value;
	var passwordValue = passwordObj.value;
	if(confirmValue == null || confirmValue == ""){
			confirmdiv.innerHTML="<font color='red' size='1pt'>请确认密码</font>";
			return false;
	}
	else if (confirmValue != passwordValue){
		confirmdiv.innerHTML="<font color='red' size='1pt'>密码不一致</font>";
			return false;
	}
	confirmdiv.innerHTML="<font color='green' size='1pt'>输入正确</font>";
	return true;
}
function checkShefen(){
	var flag1=false;
	var radio1=document.getElementsByName("shenfen");
    for(var i=0;i<radio1.length;i++)
    {
         if(radio1.item(i).checked==true)
             {
    			 flag1=true;
                 break;
       }
    }
    if(flag1==false){
    shenfendiv.innerHTML="<font color='red' size='1pt'>请选择身份</font>";
			return false;
    }else{
    	shenfendiv.innerHTML="<font color='greed' size='1pt'>输入正确</font>";
    	return true;
    }
    
}
function checkALL(){

return userflag;
}
</script>
<body>
<form action="adduser.action" method="post" onSubmit="return checkALL()">
<table>
<tr>
	<td>用户名<br></td>
	<!-- 当输入框改变是执行beginCheck()函数 -->
	<td><input type="text" name="xh" id="user"   onMouseOver="this.style.backgroundColor='#ffffff'" onMouseOut="this.style.backgroundColor='#e8f4ff'" /></td>
	<td><div id="userdiv"><font color="red">*</font></div></td>
</tr>
<tr>
	<td height="25">密码</td>
	<td><input type="password" name="kl" id="psw"   /></td>
	<td><div ><font color="red" id="pswnote">*</font></div></td>
<tr>
    <td height="39"><div align="center">密码确认</div></td>
    <td><input type="password" name="" id="confirm"/>  </td>
    <td><div ><font color="red" id="confirmdiv">*</font></div></td>
  </tr>
  <tr>
    <td height="43"><div align="center">身份</div></td>
    <td>
     <input type="radio" name="shenfen" value="1"/>管理员   <input type="radio" name="shenfen" value="2"/>普通用户  
    </td>
     <td><div ><font color="red" id="shenfendiv">*</font></div></td>
  </tr>
  <tr>
    <td height="53"><div align="center">年龄</div></td>
    <td><div align="center">
      <input type="text" name="u.age" /> *
    </div></td>
  </tr>
  <tr>
    <td height="43"><div align="center">职位</div></td>
    <td><div align="center">
      <input type="text" name="u.zhiwei" />
    </div></td>
    </tr>
     <tr>
    <td height="43"><div align="center">部门</div></td>
    <td><div align="center">
      <input type="text" name="u.bumen" />
    </div></td>
    </tr>
     <tr>
    <td height="43"><div align="center">密级</div></td>
    <td><div align="center">
      <input type="text" name="u.miji" />*
    </div></td>
    
   </tr>
   <tr>
    <td height="43"><div align="center">电话</div></td>
    <td><div align="center">
      <input type="text" name="u.tel" />
    </div></td>
    
   </tr>
    <tr>
    <td height="43"><div align="center">职称</div></td>
    <td><div align="center">
      <input type="text" name="u.zhicheng" />
    </div></td>
    
   </tr>
	  <tr>
    <td height="43" colspan="2" align="center"><label> 
      <input type="submit" name="Submit" value="添加" />
    </label></td>
    </tr>
</table>
</form>
</body>
</html>

package org.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckUser extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//取得用户填写的学号
		String xh=request.getParameter("xh");
		//设置响应内容
		String responseContext="true";
	
		try {
			if(new db("wenjianguanli","root","").registcheck(xh))
			{   
				
					responseContext="false";
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	
		//将处理结果返回给客户端
		out.println(responseContext);
		out.flush();
		out.close();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
		doGet(request,response);
	}
}

<span style="font-size:24px;">web.xml</span>

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
 <filter>
 	<filter-name>struts 2</filter-name>
 	<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
 </filter>
 <filter-mapping>
 	<filter-name>struts 2</filter-name>
 	<url-pattern>/*</url-pattern>
 </filter-mapping>
 <servlet>
	<description>This is the description of my J2EE component</description>
    	<display-name>This is the display name of my J2EE component</display-name>
    	<servlet-name>CheckUser</servlet-name>
   	<servlet-class>CheckUser</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>CheckUser</servlet-name>
    	<url-pattern>/CheckUser</url-pattern>
</servlet-mapping>
</web-app>

爽朗的琪琪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
注册页面实现

Ajax应用window.onload = function(){ //通过ID或名字获取每个对象 var usernameObj = document.getElementById("user"); var passwordObj = document.getElementById("psw"); var confirmObj = document.getElement
复制链接

扫一扫