AJAX登录验证+正则表达式

最新推荐文章于 2021-08-05 21:14:32 发布

奥申

最新推荐文章于 2021-08-05 21:14:32 发布

阅读量585

点赞数

分类专栏： JavaScript 文章标签： AJAX 登录验证正则表达式

本文链接：https://blog.csdn.net/qq_44890539/article/details/102734921

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

AJAX登录验证+正则表达式

时间有限，先看效果图
在这里插入图片描述
话不多说，代码就完事了：
前端：

<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2019/10/24
  Time: 21:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <script src="js/jquery-3.1.1.min.js"></script>
  <style>
    *{
      font-family: "楷体";
    }
    input{
      width: 100px;
      height: 40px;
      margin-top: 20px;
      font-size: 25px;
      border-radius: 15px;
    }
    #pwd,#name{
      border: 1px solid #cccc;
      width: 200px;
      height: 40px;
      border-radius: 15px;
    }

  </style>
  <body>
  <center>
    <h1>AJAX登录系统</h1>
  <form action="#">
    账号：<input type="text" name="name" id="name"><span id="nameReg"></span><br>
    密码：<input type="text" name="pwd" id="pwd"><span id="pwdReg"></span><br>
    <input type="button" value="登录">
  </form>
  <div id="show"></div>
  </center>
<script>
  $(function () {

     $(":button").click(function () {
         $.ajax({
            type:"post",
             url:"/AjaxServlet",
             data:{
                 name:$("#name").val(),
                 pwd:$("#pwd").val(),
             },
             dataType:"text",
             success:function (data) {
                 if(data == "ok"){

                     window.location.href = "show.jsp";

                 }else{
                         $("#show").text("登录失败");
                 }
             }
         });
     });

      /**
       * 判断用户名和密码的正则表达式
       */
     $("#name").blur(function () {
         var userName = /^[A-Z][A-Za-z0-9_]{6,20}$/;
         way("name",userName);

         var nameStr = $("#nameReg").text();
         if(nameStr == "×"){
             $("#name").css("border-color","red");
         }else{
             $("#name").css("border","");
         }
     });
     $("#pwd").blur(function () {
         var password = /^[A-Z][a-z0-9_]{8,15}$/;
         way("pwd",password);

         var pwdStr = $("#pwdReg").text();
         if(pwdStr == "×"){
             $("#pwd").css("border-color","red");
         }else{
             $("#pwd").css("border","");
         }
     });

      /**
       * 创建动态span
       */

  });

  /**
   * 判断正则表达式
   * @param eleId
   * @param rule
   */
  function way(eleId,rule){
      var inputValue = document.getElementById(eleId).value;
      var result = rule.test(inputValue.trim());
      if(result){
          document.getElementById(eleId+"Reg").innerHTML = "√";
          document.getElementById(eleId+"Reg").style.color = "red";
      }else{
          document.getElementById(eleId+"Reg").innerHTML = "×";
          document.getElementById(eleId+"Reg").style.color = "red";

          $("input[name$='me']").css("border-color","red");
      }
  }
</script>
  </body>
</html>

servlet代码

package servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(value = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected 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 = "A_xsa123456";
        String pwd = "xsa17637143174";

        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");
        }

    }

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