基于AJAX用户注册信息异步校验

精选原创

水中月120 2014-07-27 16:18:40 博主文章分类：javascript ©著作权

©著作权归作者所有：来自51CTO博客作者水中月120的原创作品，如需转载，请与作者联系，否则将追究法律责任

周末无事，自己写了一个用户注册信息的，异步校验。不多说，直接上源码：

check.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>基于AJAX校验的用户注册</title>  
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script  src="js/jquery-1.8.2.min.js"></script>
<style>
#password,#email {
   margin-left:34px;
}
#username{
   margin-left:18px;
}
#checkcode {
   width: 60px;
   margin-left:18px;
}
#buttongroup {
  margin-left: 15%;
}
span{
  color: red;
  font-size: 12;
 // display:none;
  width:100px;
  height:20p;
}
#username,#password,#email,#confirmpassword {
width:120px;
}
#usercheck{
width:550px;
margin-left: 40%;
}
.userres{
width:100%;
}
</style>
<script>
$(document).ready(function(){
var username=$("#username");
var password=$("#password");
var confirmpassword=$("#confirmpassword");
var email=$("#email");
var username_msg=$("#username_msg");
var email_msg=$("#email_msg");
var password_msg=$("#password_msg");
 var emptytips="输入为空.";
var xmlHttp;    //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();                  //FireFox、Opera等浏览器支持的创建方式
    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
    }
}
 function show(nexttarget,str){
 
  $(nexttarget).html(str); 
      $(nexttarget).css("display","block");
 }
 function hide(nexttarget){
 setTimeout(function(){
         $(nexttarget).hide(); 
 },5000);
 }
  $("#username").focus();
  var flag="0";
  $("input:text").bind("blur",function(e){
  var target=e.target;
  if(target.value==""){
  var nexttarget=$(this).next();
  show(nexttarget,emptytips);
  hide(nexttarget);
  }else{
  var userdata=$(this).val();
  flag=this.id;
  var query="flag="+flag+"&userdata="+userdata;
             createXmlHttp();
             xmlHttp.onreadystatechange = handler;
             xmlHttp.open("GET","queryInfro.action?"+query,true);
             xmlHttp.send(null);
  }
});
  function handler(){
 // debugger;
 var righttips=["该用户名可以使用.","该邮箱可以使用."];
 var errortips=["该用户名已存在.","该邮箱已存在."];
  var returnflag="";
  var flag2="";
     if(xmlHttp.readyState == 4&&xmlHttp.status == 200){
          returnflag=JSON.parse(xmlHttp.responseText).returnflag;
          flag2=JSON.parse(xmlHttp.responseText).flag;
          if(returnflag.trim()=="SUCCESS"){
              if(flag2.trim()=="username"){
                  show(username_msg,errortips[0]);
                  hide(username_msg);
                  }
              if(flag2.trim()=="email"){
                  show(email_msg,errortips[1]);
                  hide(email_msg);
                  }
              }else {
              if(flag2.trim()=="username"){
                      show(username_msg,righttips[0]);
                      hide(username_msg);
                  }
                  if(flag2.trim()=="email"){
                      show(email_msg,righttips[1]);
                      hide(email_msg);
                  }
             }
         }
  }
  $("form").bind("submit",function(){
      if(username.val()==""){
        show(username_msg,emptytips);
    hide(username_msg);
    return false;
      }
     if(email.val()==""){
       show(email_msg,emptytips);
       hide(email_msg);
       return false;
       }
     if(password.val()==""){
     show(password_msg,emptytips);
         hide(password_msg);
         return false;
         }
     if(password.val()!=confirmpassword.val()){
        show(password_msg,"两次密码输入不一致.");
        hide(password_msg);
        return false;
         }  
  });
});
</script>
  </head>
  <body>
  <form id="userform"  action="register.action" method="post">
  <center><h3>用户注册校验<h3/></center>
    <div id="usercheck">
    <div class="userres"><label>用户名：</label><input type="text" id="username" class="error"/><span id="username_msg"></span></div>
     <div class="userres" ><label>密码：</label><input type="password" id="password"><span id="password_msg"></span></div>
       <div class="userres"><label>确认 密码：</label><input type="password" id="confirmpassword"></div>
        <div class="userres"><label>邮箱：</label><input type="text" id="email"><span id="email_msg"></span></div>
       <div id="buttongroup"><input id="submitformbut" type="submit" value="提交"/><input type="reset" value="重置"/></div>
    </div>
  </form>
  </body>
</html>

struts,配置文件：struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
    "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.devMode" value="true"></constant>
<constant name="struts.custom.i18n.resources" value="faq"></constant>
<constant name="struts.i18n.encoding" value="UTF-8"></constant>  
      <package name="faq" extends="json-default">
     <action name="getFaq" class="com.ajax.action.FaqAction" method="getFaqs">
   <result name="SUCCESS" type="json"> 
            </result>
   </action>
    <action name="getFaq" class="com.ajax.action.FaqAction" method="getFaqs">
   <result name="SUCCESS" type="json"> 
            </result>
   </action>
    </package>
     <package name="post" extends="json-default">
     <action name="queryInfro" class="com.ajax.action.CheckAction" method="queryExsit">
   <result name="SUCCESS" type="json"> 
            </result>
            <result name="ERROR" type="json"> 
            </result>
   </action>
   <action name="register" class="com.ajax.action.CheckAction" method="register">
   <result name="SUCCESS"> 
   ./MyJsp.jsp
            </result>
   </action>
   <action name="getPostList" class="com.ajax.action.PostAction" method="showPostListInfro">
   <result name="SUCCESS" type="json"> 
            </result>
   </action>
    </package>
</struts>

Action层,CheckAction.java

package com.ajax.action;
import com.ajax.service.CheckService;
import com.ajax.util.RandomValidateCode;
import com.opensymphony.xwork2.ActionSupport;
public class CheckAction extends ActionSupport {
public String flag;
public String userdata;
public String returnflag;
public String getReturnflag() {
return returnflag;
}
public void setReturnflag(String returnflag) {
this.returnflag = returnflag;
}
public CheckService getCheckservice() {
return checkservice;
}
public void setCheckservice(CheckService checkservice) {
this.checkservice = checkservice;
}
CheckService checkservice=new CheckService();
public String getFlag() {
return flag;
}
public void setFlag(String flag) {
this.flag = flag;
}
public String getUserdata() {
return userdata;
}
public void setUserdata(String userdata) {
this.userdata = userdata;
}
public String queryExsit(){
System.out.println("flag:"+flag);
Boolean returnVal=checkservice.checkUser(flag,userdata);
if(returnVal==true){
System.out.println("SUCCESS:"+SUCCESS);
returnflag="SUCCESS";
return "SUCCESS";
}else{
System.out.println("ERROR:"+ERROR);
returnflag="ERROR";
return "ERROR";
}
}
public String register(){
System.out.println("注册成功");
return "SUCCESS";
}
}
Service层，CheckService.java
package com.ajax.service;
import com.ajax.dao.CheckUserDao;
import com.ajax.daoimpl.CheckUserDaoImpl;
public class CheckService {
CheckUserDao checkdao=new CheckUserDaoImpl();
private String rowflag="";
public String checkUserName(){
return null;
}
public String checkUserEmail(){
return null;
}
public Boolean checkUser(String flag,String userdata) {
return checkdao.checkUserInfro(flag,userdata);
}
}

DAO层，CheckUserDao.java

package com.ajax.dao;
public interface CheckUserDao {
public Boolean checkUserInfro(String rowflag,String userdata);
}
DAO实现层，CheckUserDaoImpl.java
package com.ajax.daoimpl;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import com.ajax.dao.CheckUserDao;
import com.ajax.util.DB;
public class CheckUserDaoImpl implements CheckUserDao {
Connection conn=null;
Statement stmt=null;
ResultSet rs=null;
/*
 * 判断用户信息是否已存在
 * @see com.ajax.dao.CheckUserDao#checkUserInfro(java.lang.String, java.lang.String)
 */
public Boolean checkUserInfro(String flag, String userdata) {
String sql="select * from user where "+flag+"='"+userdata+"'";
System.out.println(sql);
conn=DB.getConn();
stmt=DB.getStatement(conn);
rs=DB.getResultSet(stmt, sql);
try {
if(rs.next()){
return true;
}else{
return false;
}
} catch (SQLException e) {
e.printStackTrace();
return false;
}
}
}

Model层，UserInfr.java

package com.ajax.model;
public class UserInfr {
public String username;
public String password;
public String email;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}