利用正则表达式和Ajax验证登录

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

qq_2417580538

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

阅读量206

点赞数 1

本文链接：https://blog.csdn.net/qq_2417580538/article/details/102740816

版权

主要实现于登录成功，页面跳转，登录失败，弹窗提示，如果输入的用户名和密码符合正则表达式的规则，输入框后面会出现红色x，反之出现绿色对号

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery.js"></script>
	<style>
		html{   
		    width: 100%;   
		    height: 100%;   
		    overflow: hidden;   
		    font-style: sans-serif;   
		}   
		body{   
		    width: 100%;   
		    height: 100%;   
		    font-family: 'Open Sans',sans-serif;   
		    margin: 0;   
		    background-color: #4A374A;   
		}   
		#login{   
		    position: absolute;   
		    top: 50%;   
		    left:50%;   
		    margin: -150px 0 0 -150px;   
		    width: 300px;   
		    height: 300px;   
		}   
		#login h1{   
		    color: #fff;   
		    text-shadow:0 0 10px;   
		    letter-spacing: 1px;   
		    text-align: center;   
		}   
		h1{   
		    font-size: 2em;   
		    margin: 0.67em 0;   
		}   
		input{   
		    width: 278px;   
		    height: 18px;   
		    margin-bottom: 10px;   
		    outline: none;   
		    padding: 10px;   
		    font-size: 13px;   
		    color: #fff;   
		    text-shadow:1px 1px 1px;   
		    border-top: 1px solid #312E3D;   
		    border-left: 1px solid #312E3D;   
		    border-right: 1px solid #312E3D;   
		    border-bottom: 1px solid #56536A;   
		    border-radius: 4px;   
		    background-color: #2D2D3F;   
		}   
		.but{   
		    width: 300px;   
		    min-height: 20px;   
		    display: block;   
		    background-color: #4a77d4;   
		    border: 1px solid #3762bc;   
		    color: #fff;   
		    padding: 9px 14px;   
		    font-size: 15px;   
		    line-height: normal;   
		    border-radius: 5px;   
		    margin: 0;   
		}  
	</style>
  </head>
  
  <body>
    <div id="login">  
        <h1>Login</h1>  
        <form method="post">  
            <input type="text" required="required" placeholder="用户名" name="name" id="name" onblur="check_name()"></input><span id="nameReg"></span>  
            <input type="password" required="required" placeholder="密码" name="pwd" id="pwd" onblur="check_pwd()"></input><span id="pwdReg"></span>
            <button class="but" type="submit">登录</button>  
        </form>  
    </div>
    <script type="text/javascript">
    	//js
    	function check_name() {
	      console.log(1);
	      //获取账号
	      var code = document.getElementById("name").value;
	      //校验其格式(\w字母或数字或下划线)
	      var span = document.getElementById("nameReg");
	      var reg = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
	      if(reg.test(code)) {
	        //通过，增加✓样式
	        span.innerText = "✓";
	        span.style.color = "green";
	      } else {
	        //不通过，增加✗样式
	        span.innerText = "✗";
	        span.style.color = "red";
	      }
	   }
    function check_pwd(){
       console.log(2);
       var code2 = document.getElementById("pwd").value;
       var span2 = document.getElementById("pwdReg");
       var reg2 = /^(\w){6,20}$/;
       if(reg2.test(code2)) {
	        span2.innerText = "✓";
	        span2.style.color = "green";
	      } else {
	        span2.innerText = "✗";
	        span2.style.color = "red";
       } 
    }	
    $(function(){
    	$(":button").on("click",function(){
    		$.ajax({
    			url:"test",
    			type:"post",
    			data:{
    				name:$("#name").val(),
    				pwd:$("#pwd").val()
    			},
    			dataType:"text",
    			success:function(data){
    				if(data == "ok"){
    					window.location.href = "test.jsp";
    				}else{
    					alert("用户名或密码输入错误，请重新输入!");
    				}
    			}
    		});
    	});
    });
    </script> 
  </body>
</html>

AjaxServlet代码的url为“test”

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");
		PrintWriter out = response.getWriter();
		//自定义用户名和密码可更改
		String name = "admin";
		String pwd = "123";
		String nameAjax = request.getParameter("name");
		String pwdAjax = request.getParameter("pwd");
		if (name.equals(nameAjax) && pwd.equals(pwdAjax)) {
			out.print("ok");
		}else{
			out.print("error");
		}
		out.flush();
		out.close();
	}
}

登陆成功跳转的页面test.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录成功</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
    <p>这是登录成功后的页面</p>
  </body>
</html>

效果演示
格式错误
在这里插入图片描述
格式正确

用户名和密码输入错误

用户名和密码输入正确，跳转成功

qq_2417580538

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用正则表达式和Ajax验证登录

主要实现于登录成功，页面跳转，登录失败，弹窗提示，如果输入的用户名和密码符合正则表达式的规则，输入框后面会出现红色x，反之出现绿色对号<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String base...
复制链接

扫一扫