用Ajax验证登录页面内含正则表达式

最新推荐文章于 2021-08-06 14:25:16 发布

柠檬味儿的猿

最新推荐文章于 2021-08-06 14:25:16 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Li_Have_a_dream/article/details/102734646

本文介绍了一个使用HTML、CSS和JavaScript实现的前端登录表单，包括输入字段的正则表达式验证和Ajax异步请求。通过jQuery简化了DOM操作和Ajax调用，实现了与后端Servlet的交互，完成用户身份验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
背景图：

结构图：

代码段：

<script src="JS/jquery.js"></script>

<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>

<body
	style="background: url('picture/1.png'); background-size:100% 100% ; background-attachment: fixed">

	<div style="margin-left:800px; margin-top:400px; ">
		<form action="#" method="post">

			账号:<input type="text" name="name" id="name" onblur="verifyName()" />
			<div>大写字母开头 6-20位字符(不允许有符号但是允许有_)</div>
			<br /> 
			密码:<input type="text" name="pwd" id="pwd"onblur="verifyPwd()" />
			<br />
			<div>大写开头 数字字母符号混合 8-15位</div>
			<br /> <br /> 
			<input type="button" value="登录" />

		</form>
	</div>
	<script type="text/javascript">
		function verifyName() {
			//用户名校验
			var verifyName = document.getElementById("name").value;
			var patt1 = /^[A-ZA-z0-9_]\w{5,19}$/;
			if (!patt1.test(verifyName)) {
	
				$("#name").css("border-color", "red");
				return false;
			} else {
				return true;
			}
		}
		function verifyPwd() {
			//密码
			var verifyPwd = document.getElementById("pwd").value;
			var patt2 = /^[A-Z0-9a-z]\w{7,14}$/;
			if (!patt2.test(verifyPwd)) {
				$("#pwd").css("border-color", "red");
				return false;
			} else {
				return true;
			}
		}
	$(function(){
	$(":button").on("click",function() {
			$.ajax({
				type : "post",
				url : "servlet/AjaxServlet",
				data : {
					name : $("#name").val(),
					pwd : $("#pwd").val(),
				},
				dataType : "text",
				success : function(data) {
					if (data == "ok") {
						window.location.href = "show.jsp";
					} else {
					alert("登陆失败！！！");
	
					}
				}
			});
		});
	});
		
	</script>

跳转页面代码：

<body>
    <p style="background-color: red;"><b>登陆成功！！！</b></p>
  </body>

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 showName = request.getParameter("name");
		String showPwd = request.getParameter("pwd");
		System.out.println(showName +":" + showPwd);
		
		String name = "Abc123456";
		String pwd = "Abc123456";
		
		if(name.equals(showName) && pwd.equals(showPwd)){
			out.print("ok");
		}
		out.flush();
		out.close();
	}

}