validate技术前后台交互验证（mvc）

最新推荐文章于 2020-12-22 19:41:59 发布

RT_0114

最新推荐文章于 2020-12-22 19:41:59 发布

阅读量795

点赞数

CC 4.0 BY-SA版权

文章标签： jquery validate

本文链接：https://blog.youkuaiyun.com/Smy_0114/article/details/53818281

jquery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用jQuery和Spring MVC实现的表单验证案例，其中包括客户端验证和服务器端重复名称检查。通过AJAX进行远程调用以确保数据的唯一性，并展示了如何处理验证错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<form:input id="name" path="name" htmlEscape="false" maxlength="100" class="form-control required " readonly="" />

javascript

	$(document).ready(function() {		
			$("#inputForm").validate({
				rules:{
					name:{
						remote:{
							type : "POST",
							url : "${ctx}/*****/*****/*****",
							data : {name : function() {return $('#name').val();}}
						},
					},
				},
				messages:{
					name:{
						remote:"已经存在",
					}
				},
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-group")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});

controller

	@RequestMapping(value = "*****")
	public String name(User user,HttpServletResponse response) {
		List<User> list = userService.findNameRepeat(User);
		if(list.size()>0){
			log.info("已经存在！");
			return renderString(response, "false", "");
		}else{
			log.info("可以使用！");
			return renderString(response, "true", "");
		}
		
	}

protected String renderString(HttpServletResponse response, String string, String type) {
		try {
			response.reset();
	        response.setContentType(type);
	        response.setCharacterEncoding("utf-8");
			response.getWriter().print(string);
			return null;
		} catch (IOException e) {
			return null;
		}
	}