ajax和servlet写一个表单验证

最新推荐文章于 2024-11-19 10:44:10 发布

原创最新推荐文章于 2024-11-19 10:44:10 发布 · 304 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了如何结合Ajax和Servlet利用正则表达式进行表单验证。通过实例展示了在HTML中设置表单，使用jQuery处理Ajax请求，以及在Servlet后台进行验证的代码实现。

用 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");
		}