Ajax+正则表达式验证用户登录

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

社会人王某

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

阅读量264

点赞数

本文链接：https://blog.csdn.net/key1haha_/article/details/102733978

版权

1.页面代码：
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/h1.js" type="text/javascript"></script>
  </head>
  <body>
  <form action="#">
    账号:<input type="text" name="name" id="name"/><br>
    密码:<input type="text" name="pwd" id="pwd"/><br>
    <p><input type="button" value="登录"></p>
  </form>
  <div id="show"></div>

  </body>

2.点击按钮用正则表达式进行验证通过即跳转页面，
否则将在div中提示登陆失败
js代码：

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") {
							window.location.href = "show.jsp";
						} else {
							alert("登录失败！");
							$("#mypwd").val("");
							$("#username").focus().select();
						}
					}
				});
			});
		});
	</script>

3.servlet页面代码：
你懂得！！
在这里插入图片描述

社会人王某

关注

0
点赞
踩
2

收藏

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

1.页面代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> <script src="js/h1.js" type="text/javascript"...
复制链接

扫一扫