Ajax用正则表达式登录验证

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

今天又困了吗

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

阅读量267

点赞数

本文链接：https://blog.csdn.net/weixin_45747582/article/details/102734773

版权

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>My JSP 'index.jsp' starting page</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">
	-->
	<script src="js/jquery.js"></script>
	<style type="text/css">		
	table{
	text-align: center;
	}
			#name{
			width: 250px;
			height: 30px;
			}
			#pwd{
			width: 250px;
			height: 30px;
			}
</style>
  </head>
  <body>
		<table>
<form action="#" method="post">
<center>
				<b>账号：</b><input type="text" name="name" id="username" /><span id="verifyName"></span><br> <br>
				<b>密码：</b><input type="text" name="pwd" id="mypwd" /><span id="verifyPwd"></span><br> <br> <input
					type="button" value="登录"  onclick="verify()" style="width: 130px;height: 30px;font-size: 20px;"/>
			</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}$/;
			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}$/;
			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") {
								alert("登录成功！");
						} else {
							alert("登录失败！");
							$("#mypwd").val("");
							$("#username").focus().select();
						}
					}
				});
			});
		});
	</script>
</body>
</html>

servlet代码:

package cn.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 {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		
		String name = "ZhangXu";
		String pwd = "Admin123456";
		
		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();
	}

}

代码仅供参考
效果地址出现了一点小差错,后续作者会更新效果GIF图

今天又困了吗

关注

0
点赞
踩
1

收藏

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

jsp代码<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+r...
复制链接

扫一扫