jquery validate remote验证唯一性修改记录时remote验证不通过的解决方式

最新推荐文章于 2023-09-21 09:44:21 发布

DEMO程序园

最新推荐文章于 2023-09-21 09:44:21 发布

阅读量1.5k

点赞数 1

分类专栏：前端问题总结文章标签： validate jQuery

本文链接：https://blog.csdn.net/dsl815721035/article/details/88951444

版权

前端问题总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

注册代码实例（实现方式servlet+jsp）：

js代码部分

<script
	src="${adminPath }/static/jquery-validation-1.14.0/lib/jquery.js"></script>
<script
	src="${adminPath }/static/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	});

	$().ready(function() {
		// 在键盘按下并释放及提交后验证提交表单
		$("#submitForm").validate({
			rules : {
				username : {
					required : true,
					minlength :4,
					remote: {
					    url: "${adminPath}/user?method=checkUserName",     //后台处理程序
					    type: "post",               //数据发送方式
					    dataType: "json",           //接受数据格式   
					    data: {                     //要传递的数据
					        username: function() {
					            return $("#username").val();
					        }
					    }
					}
				},
				password : {
					required : true,
					minlength : 5
				},
				password_again : {
					required : true,
					minlength : 5,
					equalTo : "#password"
				}
			},
			messages : {
				username : {
					required : "请输入用户名",
					minlength : "用户名必须4位以上",
					remote : "用户名已存在，请重新输入"
				},
				password : {
					required : "请输入密码",
					minlength : "密码长度不能小于 5 个字母"
				},
				password_again : {
					required : "请输入确认密码",
					minlength : "密码长度不能小于 5 个字母",
					equalTo : "两次密码输入不一致"
				}
			}
		})
	});

</script>

html代码部分

<body style="background-color: #FFFAF0;">
	<div class="container" style="text-align: center; margin-top: 170px;">
		<div class="row" style="text-align: center;">
			<div class="col-sm-3"></div>
			<div class="col-sm-6" style="background-color: #FFF0F5;">
				<br />
				<div class="row" style="text-align: center; font-size: 26px;">用户注册</div>
				<br />
				<form class="form-horizontal" role="form" id="submitForm"
					action="${adminPath}/user?method=regit" method="post">
					<input type="hidden" name="role" value="2">
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">用户名<b
							style="color: red;">*</b></label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="username"
								name="username" placeholder="请输入用户名">
						</div>
					</div>
					
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">密码<b
							style="color: red;">*</b></label>
						<div class="col-sm-9">
							<input type="password" class="form-control" id="password"
								name="password" placeholder="请输入密码" >
						</div>
					</div>
					<div class="form-group">
						<label for="name" class="col-sm-3 control-label">确认密码<b
							style="color: red;">*</b></label>
						<div class="col-sm-9">
							<input type="password" class="form-control" id="password_again"
								name="password_again" placeholder="请输入密码">
						</div>
					</div>



					<div class="form-group">
						<label for="sort" class="col-sm-3 control-label"></label>
						<div class="col-sm-9">
							<input type="submit" class="btn btn-success btn-sm" value="注册">
							<input type="button" class="btn btn-default btn-sm" value="返回"
								onclick="history.go(-1)">
						</div>
					</div>
				</form>
				<br />
			</div>
			<div class="col-sm-2"></div>
		</div>
	</div>
</body>

后台java验证唯一性代码：

private void checkUserName(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String username = request.getParameter("username");
		User user = new User();
		user.setUsername(username);
		List<User> findAll = userService.findAll(user);
		if (findAll!=null && findAll.size()>0) {
			//用户名存在
			response.getWriter().write("false");
		}else{
			response.getWriter().write("true");
		}
		
	}

注意事项：以上js验证代码用于注册时验证用户是否存在是没有问题，用户直接添加用户时也不会有问题，但是用于修改的时候就会存在不改用户名就无法提交一直提示用户名称存在的bug！！！

解决办法：remote部分改为如下写法，作用是在修改的时候不进行唯一字段的验证

remote: {
						depends : function(element) {
			                return element.value !== "${user.username}";
			            },
						param : {
							url : "${adminPath}/user?method=checkUserName",
							type: "post",               //数据发送方式
						    dataType: "json",           //接受数据格式   
						    data: {                     //要传递的数据
						        username: function() {
						            return $("#username").val();
						        }
						    },
							cache :false
						}
					}

DEMO程序园

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery validate remote验证唯一性修改记录时remote验证不通过的解决方式

学习教程：http://www.runoob.com/jquery/jquery-plugin-validate.html注册代码实例（实现方式servlet+jsp）：js代码部分<script src="${adminPath }/static/jquery-validation-1.14.0/lib/jquery.js"></script><s...
复制链接

扫一扫