使用JQuery验证重复用户名

最新推荐文章于 2022-03-07 17:55:39 发布

xiaodeme

最新推荐文章于 2022-03-07 17:55:39 发布

阅读量3.7k

点赞数 1

分类专栏： JQuery 文章标签： jquery function stylesheet javascript button servlet

本文链接：https://blog.csdn.net/xinyangwl/article/details/5443393

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.     ------使用JQuery验证重复用户名--------
//-----------------------------------------------html-----------------------------------------------
<html>
<head>
  <title>使用JQuery验证重复用户名</title>
  <link rel="stylesheet" type="text/css" href="css/userValidate.css" />
  <script language="javascript" src="js/jquery-1.3.2.js"></script>
  <script language="javascript" src="js/userValidate.js"></script>
</head>
<body>
  <form action="">
   请输入用户名
   <input id="userName" class="userTxt" type="text" />
   <input id="btnUserValidate" type="button" value="验证用户名" />
   <div id="result"></div>
  </form>
</body>
</html>
//-----------------------------------------------css-----------------------------------------------
.userTxt{
/*控制边框是红色的*/
border:1px red solid;

/*在文本框下面加波浪线*/
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}
//------------------------------------------------js-----------------------------------------------
/*需要在页面装载后注册的内容*/
$(document).ready(function() {
//---------这里是页面装载后执行的代码

2. // 找到button按钮并注册事件 click:点击事件
$("#btnUserValidate").click(function() {

a)     // 1、获取文本框中的值 val():获取文本值
    var userName = $("#userName").val();
    if (userName == "") {
     alert("请输入用户名!");
    } else {
     // 2、get请求事件 get("请求的URL","","回调函数")
     $.get("AddUserServlet?userName=" + userName, null,
       function(response) {
     //3、接收服务器返回数据填充到指定的div中
       $("#result").html(response);
      });
    }
   })
  // 找到文本框并注册事件 keyup：按下键盘后弹起事件
  $("#userName").keyup(function() {
   var userName = $(this).val();
   if (userName == "") {
    $(this).addClass("userTxt");
   } else {
    $(this).removeClass("userTxt");
   }
  })
})
//-----------------------------------------------服务器端java代码-----------------------------------------------

3.     /**
     *请求的Servlet
     */
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
   PrintWriter out = response.getWriter();
   response.setContentType("text/html;charset=GBK");
  String param = request.getParameter("userName");
  if (param == null || param.length() == 0) {
   out.println("用户名不能为空!");
  } else {
   // 格式解码工具
   String userName = URLDecoder.decode(param, "GBK");
   if (userName.equals("admin")) {
    out.println("["+userName + "]:重复用户名!");        //显示给客户端的信息
   } else {
    out.println("["+userName + "]:可以使用该用户名!"); //显示给客户端的信息
   }
  }
}