用ajax检测的用户注册

来源：互联网发布：手机图片编辑软件排名编辑：程序博客网时间：2024/06/05 18:10

<html>
<head>
<#include "/WEB-INF/includes/top.ftl"/>
<script>
   var XMLHttpReq = false;
       function createXMLHttpRequest() {
     if(window.XMLHttpRequest) {
      XMLHttpReq = new XMLHttpRequest();
     }
     else if (window.ActiveXObject) {
      try {
       XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
       try {
        XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e) {
        alert("create object fail");
       }
      }
     }
    }
       function processResponse() {
        if (XMLHttpReq.readyState == 4) {
            if (XMLHttpReq.status == 200) {
             validName();
               } else {
                   alert("请求发生异常,请重试.");
               }
           }
     }
      function send(url) {
       alert(url);
    createXMLHttpRequest();
    XMLHttpReq.open("GET", url, true);
    XMLHttpReq.onreadystatechange = processResponse;
    XMLHttpReq.send(null);
   }

   function checkMail(){
    var s=document.getElementById("email").value;
      var pattern=//w+@/w+/.[a-z]+/;
      if(pattern.test(s)){
           return true;
        }else{
          return false;
       }
   }
   function checkPhotoFormat(){
    var str = document.getElementById("file").value;
    strs=str.toLowerCase();
    lens=strs.length;
    extname=strs.substring(lens-4,lens);
    if(extname==".jpg" || extname==".gif" || extname==".bmp" || extname==".jpeg"){
     return true;
    }else{
     return false;
    }
   }
   function validInfo(){
    var errMsg="";
    if(document.getElementById("username").value==""){
     errMsg="用户名不能为空";
    }else if(document.getElementById("password").value==""){
     errMsg="口令不能为空";
    }else if(document.getElementById("password").value!= document.getElementById("confirm").value){
     errMsg="两次输入的口令不匹配";
    }else if(document.getElementById("blogname").value==""){
     errMsg="你的空间名称不能为空";
    }else if(document.getElementById("email").value!=""){
     if(!checkMail()){
      errMsg="请输入合法的电子邮件地址";
     }
    }else if(document.getElementById("file").value!=""){
     if(!checkPhotoFormat()){
      errMsg="请选择正确的图片格式(jpg/jpeg/gif/bmp)";
     }
    }
    if(errMsg!=""){
     var errObj=document.getElementById("err");
     errObj.innerHTML=errMsg;
     return false;
    }
    document.frm.submit();
   }
   function f(){
    if(document.getElementById("username").value==""){
     var errObj=document.getElementById("err");
     errObj.innerHTML="请输入一个用户名";
     return;
    }
    var name=document.getElementById("username").value;
       var url="validName.do?name="+name;
    send(url);
   }
   function validName(){
    var flag=XMLHttpReq.responseText;
    var errObj=document.getElementById("err");
    if(flag=="no"){
     errObj.innerHTML="此用户名已存在，请重新选择";
     document.getElementById("username").value="";
    }else if(flag=="ok"){
     errObj.innerHTML="<font color='green'>恭喜，此用户名可用</font>";
    }else{
     errObj.innerHTML="请求异常";
    }
   }
</script>

   <style type="text/css">
    #Layer1 {
    background-color: #87CEEB;
    width:264px;
    height:10px;
    font-size:9pt;
    color:#696969
    }
    #err {
    font-size:9pt;
    color:red
    }
    .body{
     SCROLLBAR-FACE-COLOR:#F7F7F7;
     SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;
     SCROLLBAR-SHADOW-COLOR:#FFFFFF;
     SCROLLBAR-3DLIGHT-COLOR:#D4D0C8;
     SCROLLBAR-ARROW-COLOR:#808080;
     SCROLLBAR-TRACK-COLOR:#FFFFFF;
     SCROLLBAR-DARKSHADOW-COLOR:#D4D0C8;
    }
    .txt{
      background-color: #FFFFFF;
      border-top: 1px solid #AFEEEE;
      border-right: 1px solid #AFEEEE;
      border-bottom: 1px solid #AFEEEE;
      border-left: 1px solid #AFEEEE;
    }
    .btn{
      background-color: #FFFFFF;
      border-top: 1px solid #C0C0C0;
      border-right: 1px solid #C0C0C0;
      border-bottom: 1px solid #C0C0C0;
      border-left: 1px solid #C0C0C0;
    }
    a{
     font-size:12px;
     color:696969;
     text-decoration:none;
    }
    a:hover{
     color:#FF0000;
     text-decoration:underline
    }
</style>
</head>
<body bgcolor="#FFFFFF" class="body">
   <table width="500" border=0 align="center" cellpadding=2 cellspacing=1 bordercolorlight=#cccccc bordercolordark=#cccccc bgcolor="#87CEEB" style="FONT-SIZE: 9pt">
            <td align="center"><div align="center" id="Layer1">新用户注册</div></td>
           <tr align=middle bgcolor="#FFF8DC" bordercolordark="#ffffff" bordercolorlight="#008000">
             <td>
               <div align="center">
        <@ww.form name="frm" action="register.do" method="post" enctype="multipart/form-data" namespace="/">
      <div id="err" align="center"> </div>
      用户昵称:      <input class="txt" type="text" id="username" name="model.username" maxlength="20">       <a href="javascript:f()">检测用户名</a><br><br>
         用户口令:      <input class="txt" type="password" id="password" name="model.password" size="22" maxlength="20"/>       <font color="red">* 此项为必填</font><br><br>
         确认口令:      <input class="txt" type="password" id="confirm" name="model.confirm" size="22" maxlength="20"/>       <font color="red">* 此项为必填</font><br><br>
         空间名称:      <input class="txt" type="text" id="blogname" name="model.blogName" size="20" maxlength="20"/>       <font color="red">* 此项为必填</font><br><br>
         性别:           <select class="txt" id="sex" name="model.sex">
          <option value="男">--   男   --</option>
          <option value="女">--   女   --</option>
          <option value="保密">--   保密   --</option>
         </select><br><br>
         电子邮箱:      <input class="txt" type="text" id="email" name="model.email"   maxlength="20"/>      <font color="green">* 以下为选填</font><br><br>
         QQ/MSN:      <input class="txt" type="text" name="model.contact"   maxlength="20"/>       <br><br>
         肖像上传:      <input class="txt" type="file" id="file" name="file"/><br><br>
         随笔:<br><textarea class="txt" name="motto" cols="50" rows="4"></textarea>
      </@ww.form>
      <input type="button" value="提交注册信息" class="btn" onclick="validInfo()"/>
      <div align="right">
       <a href="initLogin.do">返回登录</a>
       <a href="#">忘记密码?</a>
      <div>
     </div>
             </td>
           </tr>
   </table>
   <br>
   <center><#include "/WEB-INF/includes/foot.ftl"/></center>
</body>
</html>