使用jQuery验证用户名是否存在，达到局部刷新的效果

最新推荐文章于 2019-07-30 21:03:52 发布

u010916316

最新推荐文章于 2019-07-30 21:03:52 发布

阅读量590

点赞数

分类专栏： jquery 文章标签： jquery

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

废话不多说了，直接贴代码，程序员都能看得懂。

前台：jqueryLogin.jsp

[html]view plaincopy 
   
 <%@ page pageEncoding="UTF-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
 <html><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />  
 <title>使用jQuery验证用户名是否存在，达到局部刷新的效果</title>   
 <script src="${basePath}/js/jquery.js" type="text/javascript"></script>  
 <script type="text/javascript">  
 $(document).ready(function(){  
     //聚焦时触发的事件  
     $("#loginname").focus(function(){  
         $("#msg").html("");  
     });  
     //点击按钮时触发事件  
     $("#checkLoginname").click(function(){  
         var loginname=$("#loginname").val().replace(/\s/g,'');//去除头尾空格  
 注解：/正则表达式/   这两个斜杠是JS正则表达式的规则，\s   匹配任何空白字符，包括空格、制表符、换页符等等。\g   全文匹配
 
         if(loginname==''){  
             $("#msg").html("用户名不能为空!");  
             $("#loginname").val("");  
             return false;  
         }  
         if(loginname.length>20){  
             $("#msg").html("用户名超过长度!");  
             return false;  
         }  
                 //使用jQuery提交，回调函数function(data)里返回相应信息:data  
         $.post("${basePath}/checkloginname.htm?d="+new Date().getTime(), {"member.loginname":loginname}, function(data){  
             $("#msg").html(data);  
         });  
         return false;  
     });  
 });  
 </script>   
   </head>   
   <body>   
     <form method="post" action="${basePath}/registe.htm" id="registeForm" class="validateForm">  
           <tr>   
             <td width="30%" align="right">用户名：</td>   
             <td width="70%"> <input type="text" name="member.loginname" id="loginname" class="input" />   
                 <input type="button" value="检查用户名是否可用" class="btn" id="checkLoginname"/> <span id="msg" style="color:red"></span></td>   
           </tr>   
     </form>   
   </body>   
 </html>  

后台action代码：

MemberAction.java

[java]view plaincopy 
   
 /** 
  *  ClassName: MemberAction.java 
  *  Created on 2011 
  *  Copyrights 2011 hi.csdn.net/tjcyjd All rights reserved. 
  *  site: http://hi.csdn.net/tjcyjd 
  *  email: 908599713@qq.com 
  */  
 package com.tjitcast.bbs.web.action.front;  
 import org.apache.struts2.convention.annotation.Action;  
 import org.apache.struts2.convention.annotation.Namespace;  
 import org.apache.struts2.convention.annotation.ParentPackage;  
 import org.springframework.context.annotation.Scope;  
 import org.springframework.stereotype.Controller;  
 import com.tjitcast.bbs.domain.Member;  
   
 /** 
  * 检查会员是否存在的Action类 
  *  
  * @author yjd 
  */  
 @Controller("front.memberAction")  
 @Scope("prototype")  
 @Namespace("/")  
 @ParentPackage("struts-default")  
 public class MemberAction extends BaseAction {  
     private static final long serialVersionUID = -4631080996625964833L;  
     private Member member;  
     /** 
      * 检查用户名是否已经存在 
      */  
     @Action(value = "checkloginname")  
     public void checkLoginname() {  
         Member temp = memberService.get(member.getLoginname());  
         if (temp != null) {  
             renderText("用户名已存在，请更换！");  
         } else {  
             renderText("恭喜你，这个用户名可用!");  
         }  
     }  
       public void renderText(String text) {  
         HttpServletResponse response = getResponse();  
         response.setContentType("text/plain;charset=UTF-8");  
         try {  
             response.getWriter().write(text);  
             response.getWriter().flush();  
         } catch (IOException e) {  
             throw new IllegalArgumentException(e); // 把受检异常转换为非受检异常  
         }  
     }  
     public Member getMember() {  
         return member;  
     }  
   
     public void setMember(Member member) {  
         this.member = member;  
     }  
 }  

Member实体类就不贴出来了……

效果如下图：

u010916316

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery验证用户名是否存在，达到局部刷新的效果

废话不多说了，直接贴代码，程序员都能看得懂。前台：jqueryLogin.jsp[html] view plaincopy%@ page pageEncoding="UTF-8"%> > html>head>meta content="text/html; charset=UTF-8" http-equiv="Conte
复制链接

扫一扫