使用jQuery验证用户名是否存在,达到局部刷新的效果
2014-03-15 17:05
525 查看
<%@ 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,'');//去除头尾空格 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
/** * ClassName: MemberAction.java*/ 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; } }
效果如下图:
相关文章推荐
- jQuery扩展实现复选框批操作
- jquery.flip插件翻转效果
- [转]Jquery Validate用法简介
- [转]Jquery Ajax用法
- JQuery Mobile学习笔记
- jquery 默认替换某些内容
- jQuery写法:
- 项目总结—jQuery EasyUI-DataGrid 拼表及查看详情
- Jquery 插件PrintArea 打印指定的网页区域
- jquery自动将form表单封装成json
- JQuery高性能最佳实践
- jQuery Pjax – 页面无刷新加载,优化用户体验
- ASP.NET的CSS+JQuery1
- jquery特效收藏第一期
- jquery
- 兼容IE与firefox火狐的回车事件(js与jquery)
- jQuery实现遮罩层
- 43个处理触摸事件的jQuery插件
- jquery实现人物简单走动
- 一张思维导图说明jQuery的AJAX请求机制