用ajax简单登录页面内含正则表达式

最新推荐文章于 2022-09-17 13:03:32 发布

G18239715095

最新推荐文章于 2022-09-17 13:03:32 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/G18239715095/article/details/102733822

版权

本文展示了如何使用Ajax技术创建一个简单的登录页面，其中包括利用正则表达式进行输入验证。通过Ajax，实现了后台数据的异步交互，提高了用户体验。文章包括了页面跳转及Servlet处理代码的相关示例。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述
代码：

<script 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
	style="background: url('tupian/1.png');background-size:100% 100% ; background-attachment: fixed">
	<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>
	<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)) {
				$("#mypwd").css("border-color", "red");
				return false;
			} else {
				return true;
			}
		}
	
		$(function() {
			$(":button").on("click", function() {
				$.ajax({
					type : "post",
					url : "servlet/AjaxServlet",
					data : {
						name : $("#username").val(),
						pwd : $("#mypwd").val()
					},
					dataType : "text",
					success : function(data) {
						if (data == "ok") {
							window.location.href = "show.jsp";
						} else {
							alert("登陆失败！！！")
							
						}
					}
				});
			});
		});
	</script>

</body>

跳转页面代码：

 <body>
    来了！老弟 <br>
  </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 = "Abc123456789";
		
		if(name.equals(showName) && pwd.equals(showPwd)){
			out.print("ok");
		}
		out.flush();
		out.close();
	}

}

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

G18239715095

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用ajax简单登录页面内含正则表达式

简单登录页面jsp代码<script src="js/jquery.js" type="text/javascript"></script><style type="text/css">table { width: 360px; height: 45px: text-align: center; margin-top: 120px;...
复制链接

扫一扫