使用Ajax做登录验证

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

风雪漫千山

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

阅读量455

点赞数

本文链接：https://blog.csdn.net/Tao001100/article/details/102731668

版权

使用Ajax做登录验证

html

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="JS/jQuery.js"></script>
<style type="text/css">
table {
 width: 360px;
 height: 45px:    
 text-align: center;
 margin-top: 120px;
 border-collapse: collapse;
}
input {
 width: 280px;
 height: 30px;
}
</style>
</head>
<body>
 <form action="#" method="post">
  <center>
   <table align="center" border="1">
    <tr>
     <td>用户名:</td>
     <td><input type="text" name="name" id="username" onblur="verifyName()" /></td>
    </tr>
    <tr>
     <td>密码:</td>
     <td><input type="text" name="pwd" id="mypwd" onblur="verifyPwd()" /></td>
    </tr>
    <tr>
     <td colspan="3" align="center" height="36px">
     <input type="button" style="width: 8rem;height:27px" value="提交登录验证" /></td>
    </tr>
   </table>
  </center>
 </form>
</body>
</html>

<script type="text/javascript">
  function verifyName() {//用户名校验
   var verifyName = document.getElementById("username").value;
   var name = /^[A-Z][0-9A-Za-z_][a-zA-Z0-9_]{5,19}$/; // 大写字母开头 6-20位字符(不允许有符号但是允许有_)
   if (!name.test(verifyName)) {
    $("#username").css("border-color", "red");
    return false;
   } else {
    return true;
   }
  }
  function verifyPwd() {//密码
   var verifyPwd = document.getElementById("mypwd").value;
   var pwd = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,20}$/; //大写开头 数字字母符号混合 8-15位
   if (!pwd.test(verifyPwd)) {
    $("#username").css("border-color", "red");
    return false;
   } else {
    return true;
   }
  }
  $(function() {
   $(":button").on("click", function() {
    $.ajax({
     type : "post",
     url : "AJAXServlet",
     data : {
      name : $("#username").val(),
      pwd : $("#mypwd").val()
     },
     dataType : "text",
     success : function(data) {
      if (data == "ok") {
       window.location.href = "show.jsp";
      } else {
       alert("登录失败！");
       $("#mypwd").val("");
       $("#username").focus().select();
      }
     }
    });
   });
  });
 </script>

servlet

package com.hnpi.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doPost(request, response);
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  
  String name = "张三";
  String pwd = "123456";
  String ajaxName = request.getParameter("name");
  String ajaxPwd = request.getParameter("pwd");
  System.out.println(ajaxName + "——" + ajaxPwd);
  if (name.equals(ajaxName) && pwd.equals(ajaxPwd)) {
   out.print("ok");
  } else {
   out.print("error");
  }
  out.flush();
  out.close();
 }
}