用Ajax实现的验证用户名是否重复实例

  1. <script>   
  2.     function getCity(){   
  3.    var obj_pro=document.getElementById("province");   
  4.    var obj_City = document.getElementById("city");   
  5.    var pro_index=obj_pro.selectedIndex;   
  6.    var pro_value=obj_pro.options[pro_index].value;   
  7.        
  8.      
  9.   if(pro_value!=""&&pro_value!=null){   
  10.         
  11.      place.getCityList(pro_value,cityReturn);   
  12.       
  13.    }else{   
  14.         
  15.      DWRUtil.removeAllOptions(obj_City);   
  16.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});   
  17.    }   
  18.       
  19.   }   
  20.     
  21.     
  22.  function cityReturn(data){   
  23.       
  24.      var obj_City = document.getElementById("city");   
  25.      DWRUtil.removeAllOptions(obj_City);   
  26.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});   
  27.      DWRUtil.addOptions(obj_City,data);   
  28.  }    
  29.     
  30.  function currentDate(){   
  31.     var myDate=new Date();   
  32.     var year=myDate.getFullYear();   
  33.     var month=myDate.getMonth()+1;   
  34.     var day=myDate.getDate();   
  35.     var now=year+"-"+month+"-"+day;   
  36.     document.forms[0]['user.startDate'].value=now;   
  37.  }   
  38.     
  39.   // 创建XMLHTTPRequest对象   
  40.  function getXMLHTTPRequest(){   
  41.      var xmlHttp;   
  42.      if(window.XMLHttpRequest){   
  43.          xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建   
  44.       }else if(window.ActiveXObject){   
  45.          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建   
  46.       }   
  47.         
  48.     return xmlHttp;   
  49.     
  50.  }   
  51.     
  52.  var http;   
  53.  function checkUser(){   
  54.     var username=document.forms[0]['user.username'].value;   
  55.     http=getXMLHTTPRequest();   
  56.     var url="${path}/user/checkUser.action?user.username="+username;   
  57.     if(http){  //成功创建XMLHTTPRequest对象   
  58.       http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)   
  59.       http.onreadystatechange=callback;  //指定回调函数　　    
  60.       http.send(null);  //发送请求   
  61.     }   
  62.        
  63.        
  64.  }   
  65.     
  66.  function callback(){   
  67.    if(http.readyState==4){   
  68.      if(http.status==200){   
  69.         processResponse();   
  70.      }   
  71.       
  72.    }   
  73.      
  74.  }   
  75.  //处理服务器端响应   
  76.  function processResponse(){   
  77.     var text=http.responseText;   
  78.     if(text=="true"){   
  79.         document.getElementById("error").innerHTML="用户名已经存在";   
  80.      }else{   
  81.         document.getElementById("error").innerHTML="";   
  82.      }   
  83.  }   
  84.     
  85.     
  86.     
  87. </script>   
  88.   
  89. <form name="form" method="post" action="user/userSave.action">   
  90.     
  91. <table  align="center" class="table-form" >   
  92.   <tr>   
  93.      <td colspan="4" class="table-title">添加用户信息</td>   
  94.   </tr>   
  95.   <tr>   
  96.      <td class=table-lable_title>用户名</td>   
  97.      <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>   
  98.      <td class=table-lable_title>密&nbsp;&nbsp;码</td>   
  99.      <td><input type="password" name="user.password" id="password" size="21"></td>   
  100.   </tr>   
  101.   <tr>   
  102.      <td class=table-lable_title>性&nbsp;&nbsp;别</td>   
  103.      <td><select name="user.sex" style="width:50px">   
  104.           <option value="1">&nbsp;男&nbsp;</option>   
  105.           <option value="0">&nbsp;女&nbsp;</option>   
  106.          </select>   
  107.      </td>   
  108.      <td class=table-lable_title>省&nbsp;&nbsp;份</td>   
  109.      <td><select name="user.provinceId" id="province" onChange="getCity();">   
  110.          <option value="">请选择省份</option>   
  111.          <s:iterator value="provinceList">   
  112.          <option value="0">四川</option>
  113.          <option value="1">北京</option>　　   
  114.          </s:iterator>   
  115.          </select>   
  116.      </td>   
  117.   </tr>    
  118.   <tr>   
  119.      <td class=table-lable_title>城&nbsp;&nbsp;市</td>   
  120.      <td><select name="user.cityId" id="city">   
  121.        <option value="">请选择城市...</option>   
  122.        </select>   
  123.      </td>   
  124.      <td class=table-lable_title>电&nbsp;&nbsp;话</td>   
  125.      <td><input type="text" name="user.telphone" id="telphone" size="20"></td>   
  126.    </tr>   
  127.    <tr>   
  128.      <td class=table-lable_title>E-Mail</td>   
  129.      <td><input type="text" name="user.email" id="email" size="20"></td>   
  130.      <td class=table-lable_title>添加日期</td>   
  131.      <td>   
  132.       <input type="text" name="user.startDate" class="Wdate" value="" onmouseover="currentDate();" onclick="new WdatePicker(this)" readonly>   
  133.      </td>   
  134.    </tr>   
  135.    <tr>   
  136.       <td colspan="4" class="table-button">   
  137.          <input type="submit" value="提交" >   
  138.          <input type="reset"  value="重置" >   
  139.       </td>   
  140.      </tr>   
  141. </table>   
  142.       
  143. </form>         
  144. </body>   
  145. </html>  
[java] view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>用户添加页面</title>  
  4. <script>  
  5.   
  6.   function getCity(){  
  7.    var obj_pro=document.getElementById("province");  
  8.    var obj_City = document.getElementById("city");  
  9.    var pro_index=obj_pro.selectedIndex;  
  10.    var pro_value=obj_pro.options[pro_index].value;  
  11.       
  12.     
  13.   if(pro_value!=""&&pro_value!=null){  
  14.        
  15.      place.getCityList(pro_value,cityReturn);  
  16.      
  17.    }else{  
  18.        
  19.      DWRUtil.removeAllOptions(obj_City);  
  20.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});  
  21.    }  
  22.      
  23.   }  
  24.    
  25.    
  26.  function cityReturn(data){  
  27.      
  28.      var obj_City = document.getElementById("city");  
  29.      DWRUtil.removeAllOptions(obj_City);  
  30.      DWRUtil.addOptions(obj_City,{'':'请选择城市...'});  
  31.      DWRUtil.addOptions(obj_City,data);  
  32.  }   
  33.    
  34.  function currentDate(){  
  35.     var myDate=new Date();  
  36.     var year=myDate.getFullYear();  
  37.     var month=myDate.getMonth()+1;  
  38.     var day=myDate.getDate();  
  39.     var now=year+"-"+month+"-"+day;  
  40.     document.forms[0]['user.startDate'].value=now;  
  41.  }  
  42.    
  43.   // 创建XMLHTTPRequest对象  
  44.  function getXMLHTTPRequest(){  
  45.      var xmlHttp;  
  46.      if(window.XMLHttpRequest){  
  47.          xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建  
  48.       }else if(window.ActiveXObject){  
  49.          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建  
  50.       }  
  51.        
  52.     return xmlHttp;  
  53.    
  54.  }  
  55.    
  56.  var http;  
  57.  function checkUser(){  
  58.     var username=document.forms[0]['user.username'].value;  
  59.     http=getXMLHTTPRequest();  
  60.     var url="${path}/user/checkUser.action?user.username="+username;  
  61.     if(http){  //成功创建XMLHTTPRequest对象  
  62.       http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)  
  63.       http.onreadystatechange=callback;  //指定回调函数　　   
  64.       http.send(null);  //发送请求  
  65.     }  
  66.       
  67.       
  68.  }  
  69.    
  70.  function callback(){  
  71.    if(http.readyState==4){  
  72.      if(http.status==200){  
  73.         processResponse();  
  74.      }  
  75.      
  76.    }  
  77.     
  78.  }  
  79.  //处理服务器端响应  
  80.  function processResponse(){  
  81.     var text=http.responseText;  
  82.     if(text=="true"){  
  83.         document.getElementById("error").innerHTML="用户名已经存在";  
  84.      }else{  
  85.         document.getElementById("error").innerHTML="";  
  86.      }  
  87.  }  
  88.    
  89.    
  90.    
  91. </script>  
  92. </head>  
  93. <body>  
  94.   
  95. <form name="form" method="post" action="${path }/user/userSave.action">  
  96.    
  97. <table  align="center" class="table-form" >  
  98.   <tr>  
  99.      <td colspan="4" class="table-title">添加用户信息</td>  
  100.   </tr>  
  101.   <tr>  
  102.      <td class=table-lable_title>用户名</td>  
  103.      <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>  
  104.      <td class=table-lable_title>密&nbsp;&nbsp;码</td>  
  105.      <td><input type="password" name="user.password" id="password" size="21"></td>  
  106.   </tr>  
  107.   <tr>  
  108.      <td class=table-lable_title>性&nbsp;&nbsp;别</td>  
  109.      <td><select name="user.sex" style="width:50px">  
  110.           <option value="1">&nbsp;男&nbsp;</option>  
  111.           <option value="0">&nbsp;女&nbsp;</option>  
  112.          </select>  
  113.      </td>  
  114.      <td class=table-lable_title>省&nbsp;&nbsp;份</td>  
  115.      <td><select name="user.provinceId" id="province" onChange="getCity();">  
  116.          <option value="">请选择省份</option>  
  117.          <s:iterator value="provinceList">  
  118.          <option value="<s:property value="id"/>"><s:property value="provinceName"/></option>  
  119.          </s:iterator>  
  120.          </select>  
  121.      </td>  
  122.   </tr>   
  123.   <tr>  
  124.      <td class=table-lable_title>城&nbsp;&nbsp;市</td>  
  125.      <td><select name="user.cityId" id="city">  
  126.        <option value="">请选择城市...</option>  
  127.        </select>  
  128.      </td>  
  129.      <td class=table-lable_title>电&nbsp;&nbsp;话</td>  
  130.      <td><input type="text" name="user.telphone" id="telphone" size="20"></td>  
  131.    </tr>  
  132.    <tr>  
  133.      <td class=table-lable_title>E-Mail</td>  
  134.      <td><input type="text" name="user.email" id="email" size="20"></td>  
  135.      <td class=table-lable_title>添加日期</td>  
  136.      <td>  
  137.       <input type="text" name="user.startDate" class="Wdate" value="" onmouseover="currentDate();" onclick="new WdatePicker(this)" readonly>  
  138.      </td>  
  139.    </tr>  
  140.    <tr>  
  141.       <td colspan="4" class="table-button">  
  142.          <input type="submit" value="提交" >  
  143.          <input type="reset"  value="重置" >  
  144.       </td>  
  145.      </tr>  
  146. </table>  
  147.      
  148. </form>        
  149. </body>  
  150. </html>  
<html>
<head>
<title>用户添加页面</title>
<script type="text/javascript" src="${path}/common/plugins/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="${path}/dwr/interface/place.js"></script>
<script type="text/javascript" src="${path}/dwr/engine.js"></script>
<script type="text/javascript" src="${path}/dwr/util.js"></script>
<script>

  function getCity(){
   var obj_pro=document.getElementById("province");
   var obj_City = document.getElementById("city");
   var pro_index=obj_pro.selectedIndex;
   var pro_value=obj_pro.options[pro_index].value;
    
  
  if(pro_value!=""&&pro_value!=null){
     
     place.getCityList(pro_value,cityReturn);
   
   }else{
     
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
   }
   
  }
 
 
 function cityReturn(data){
   
     var obj_City = document.getElementById("city");
     DWRUtil.removeAllOptions(obj_City);
     DWRUtil.addOptions(obj_City,{'':'请选择城市...'});
	 DWRUtil.addOptions(obj_City,data);
 } 
 
 function currentDate(){
    var myDate=new Date();
    var year=myDate.getFullYear();
    var month=myDate.getMonth()+1;
    var day=myDate.getDate();
    var now=year+"-"+month+"-"+day;
    document.forms[0]['user.startDate'].value=now;
 }
 
  // 创建XMLHTTPRequest对象
 function getXMLHTTPRequest(){
     var xmlHttp;
     if(window.XMLHttpRequest){
         xmlHttp=new XMLHttpRequest();  //非IE浏览器，用xmlhttprequest对象创建
      }else if(window.ActiveXObject){
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE浏览器用activexobject对象创建
      }
     
    return xmlHttp;
 
 }
 
 var http;
 function checkUser(){
    var username=document.forms[0]['user.username'].value;
    http=getXMLHTTPRequest();
    var url="${path}/user/checkUser.action?user.username="+username;
    if(http){  //成功创建XMLHTTPRequest对象
      http.open("GET",url,true); 　　//与服务端建立连接(请求方式post或get，地址,true表示异步)
      http.onreadystatechange=callback;  //指定回调函数　　 
      http.send(null);  //发送请求
    }
    
    
 }
 
 function callback(){
   if(http.readyState==4){
     if(http.status==200){
        processResponse();
     }
   
   }
  
 }
 //处理服务器端响应
 function processResponse(){
    var text=http.responseText;
    if(text=="true"){
        document.getElementById("error").innerHTML="用户名已经存在";
     }else{
        document.getElementById("error").innerHTML="";
     }
 }
 
 
 
</script>
</head>
<body>

<form name="form" method="post" action="${path }/user/userSave.action">
 
<table  align="center" class="table-form" >
  <tr>
     <td colspan="4" class="table-title">添加用户信息</td>
  </tr>
  <tr>
     <td class=table-lable_title>用户名</td>
     <td><input type="text" name="user.username" onBlur="checkUser()"><span id="error" style="color:red"></span></td>
     <td class=table-lable_title>密&nbsp;&nbsp;码</td>
     <td><input type="password" name="user.password" id="password" size="21"></td>
  </tr>
  <tr>
     <td class=table-lable_title>性&nbsp;&nbsp;别</td>
     <td><select name="user.sex" style="width:50px">
          <option value="1">&nbsp;男&nbsp;</option>
          <option value="0">&nbsp;女&nbsp;</option>
         </select>
     </td>
     <td class=table-lable_title>省&nbsp;&nbsp;份</td>
     <td><select name="user.provinceId" id="province" onChange="getCity();">
         <option value="">请选择省份</option>
         <s:iterator value="provinceList">
         <option value="<s:property value="id"/>"><s:property value="provinceName"/></option>
         </s:iterator>
         </select>
     </td>
  </tr> 
  <tr>
     <td class=table-lable_title>城&nbsp;&nbsp;市</td>
     <td><select name="user.cityId" id="city">
       <option value="">请选择城市...</option>
       </select>
     </td>
     <td class=table-lable_title>电&nbsp;&nbsp;话</td>
     <td><input type="text" name="user.telphone" id="telphone" size="20"></td>
   </tr>
   <tr>
     <td class=table-lable_title>E-Mail</td>
     <td><input type="text" name="user.email" id="email" size="20"></td>
     <td class=table-lable_title>添加日期</td>
     <td>
      <input type="text" name="user.startDate" class="Wdate" value="" onmouseover="currentDate();" onclick="new WdatePicker(this)" readonly>
     </td>
   </tr>
   <tr>
      <td colspan="4" class="table-button">
	     <input type="submit" value="提交" >
		 <input type="reset"  value="重置" >
	  </td>
     </tr>
</table>
   
</form>      
</body>
</html>
posted @ 2015-01-08 10:58  Berly  阅读(151)  评论(0)    收藏  举报