ajax和servlet写一个表单验证

眼眸'

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2024-02-16 18:08:26 发布 313 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

用 ajax和servlet正则表达式验证表单

效果图：

在这里插入图片描述

html代码

	账号:<input type="text" name="name" id="name" index="0" />
	<br /> 密码:
	<input type="text" name="pwd" id="pwd" index="1" />
	<br />
	<input type="button" value="登录" />
	<div id="show"></div>

jQuery代码

<script>
		var reg = [ /^[\u2E80-\u9FFF]+$/ ,/[1-9]+$/];
		$(function() {
			$(function() {
				//待页面dom节点加载完毕之后给所有的input输入框后面加一个span标签
				$(":input").after("<span></span>");
				//给所有input输入框添加一个bulr事件，并且向已有的span中添加数据
				$(":input").blur(function() {
					var value = $(this).val();
					var index = $(this).attr("index");
					var regText = reg[index];
					if (regText.test(value)) {
						$(this).next("span").text("√").css("color", "green");
					} else {
						$(this).next("span").text("×").css("color", "red");
					}

				});
			});
		});

		$(function() {
			$(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 {
								$("#show").text("登录失败").css("color", "red");
							}
						}
					})
				});
			});

		});
	</script>

servlet代码

	response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		response.setCharacterEncoding("utf-8");
		String name = "张三";
		String pwd = "123";
		String ajaxName = request.getParameter("name");
		String ajaxPwd = request.getParameter("pwd");
		
		if(name.equals(ajaxName)&&pwd.equals(ajaxPwd)){
			out.print("ok");
		}else{
			out.print("error");
		}