Ajax实现登录验证(正则判断)

最新推荐文章于 2022-12-05 00:51:31 发布

小逸猿

最新推荐文章于 2022-12-05 00:51:31 发布

阅读量913

点赞数 2

文章标签： Ajax jQuery 登录验证

本文链接：https://blog.csdn.net/weixin_45748576/article/details/102734449

版权

废话不多说，先上效果图：

在这里插入图片描述

先上主要的jQuery代码

<script type="text/javascript">
      $(function(){
      	//用户正则验证
          $("#name").blur(function () {
              var name1 = $("#name").val();
              var regName = /^[a-z0-9_-]{3,16}$/;
              if(regName.test(name1)){
                  $("#name").css("border-color","green");
              }else {
                  $("#name").css("border-color","red");
              }
          })
          //密码正则验证
          $("#pwd").blur(function () {
              var pwd1 = $("#pwd").val();
              var regPwd = /^[a-z0-9_-]{3,16}$/;
              if(regPwd.test(pwd1)){
                  $("#pwd").css("border-color","green");
              }else {
                  $("#pwd").css("border-color","red");
              }
          })
          //按钮绑定Ajax事件
          $(":button").on("click",function(){
              $.ajax({
                  type:"post",		//传递类型
                  url:"test",		//servlet-mapping
                  data:{			//准备数据
                      name:$("#name").val(),
                      pwd:$("#pwd").val()
                  },
                  dataType:"text",	//返回类型
                  success:function(data){
                      if(data =="ok"){
                          window.location.href="loginSuccess.jsp";
                      }else{
                          alert("登录失败");
                      }
                  }
              });
          })
      })
  </script>

</html>

css+HTML代码如下

  <style type="text/css">
    body{
      margin: 0;
      padding: 0;
    }

    #bg{
      width: 100%;
      height: 800px;
      background-image: url(image/andrei-bazanov-loshadi-trava-oblaka-solntse-andrey-bazanov-h.jpg) ;
    }
    #item input{
      margin-top: 10px;
      width: 200px;
      height: 30px;

    }
    #item{
      margin: 0 auto;
      margin-top: 350px;
      margin-right: 200px;
      float: right;
      font-size: 16px;
      font-family: "bookshelf symbol 7";
    }
  </style>
  <body>
  <div id="bg">
    <div id="item">
      名字：<input type="text" name="name" id="name" /><br />
      密码：<input type="password" name="pwd" id="pwd" /><br />
      <input type="button" value="登录" />
    </div>
    <div id="show"></div>
  </div>
  </body>

servlet代码

public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();

        String name = "admin";
        String pwd = "123456";

        String formName = request.getParameter("name");
        String formPwd = request.getParameter("pwd");
        System.out.print(formName+":"+formPwd);
        if(name.equals(formName) && pwd.equals(formPwd)){
            out.print("ok");
        }else{
            out.print("error");
        }
        out.flush();
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

小逸猿

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现登录验证(正则判断)

废话不多说，先上效果图：先上主要的jQuery代码<script type="text/javascript"> $(function(){ //用户正则验证 $("#name").blur(function () { var name1 = $("#name").val(); ...
复制链接

扫一扫