校验页面输入的数据在数据库中是否存在_vue input输入后判断值是否在数据库存在-CSDN博客

本文介绍如何在前端表单中使用validate插件进行实时校验，包括字段的唯一性检查，通过Ajax与后端交互，确保输入数据的正确性和唯一性。同时，展示了如何在控制器中处理这些请求，实现数据的有效性和安全性校验。

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

一、在页面中国保留原来的值，跟修改之后的做比较

1、要校验的字段

<div class="form-group">
								<div class="row">
									<div class="col-sm-12">
										<label class="col-sm-3 control-label">分类名称</label>
										<div class="col-sm-6">
											<input type="text" name="name" id="name" value="${courseClassify.name}" class="form-control" maxlength="200" placeholder="请输入" />
										</div>
									</div>
								</div>
							</div>

2、原来的值

<input type="hidden" id="oldName" value="${courseClassify.name}">

3、使用validate进行校验

$("#inputForm").validate({
               rules: {
				   name:{
					   remote: {
						   type: "get",
						   dataType: "json",
						   url: "${base}/admin/course_classify/check_name.jhtml",
						   data: {
							   name: function () {
								   return $("#name").val();
							   },
							   oldname:function () {
                                   return $("#oldName").attr();
							   },
						   }
					   }
				   }
                },
                messages: {
               	name:{
						remote: "该分类名称已经存在"
					}}
			}
				);

4、controller处理

 /**
     * 检查分类名称是否存在
     */
    @RequestMapping(value = "/check_name", method = {RequestMethod.GET})
    @ResponseBody
    public boolean checkAccount(String name,String oldname) {
        if(oldname != null){
            if (StringUtils.isEmpty(name)) {
                return true;
            }
            if (StringUtils.isEmpty(oldname)) {
                return true;
            }
            if (name.equals(oldname)) {
                return true;
            }
        }
       Long count = this.courseClassifyService.count(Paramap.create().put("name", name));
        if (null != count && count > 0) {
            return false;
        } else {
            return true;
        }
    }

二、在前端直接把id值携带到controller层，在根据id排除数据本身

1、验证的字段

<div class="form-group">
								<div class="row">
									<div class="col-sm-12">
										<label class="col-sm-3 control-label">手机号</label>
										<div class="col-sm-6">
											<input type="text" name="phone" id="phone" data-id="${appUser.id}"  value="${appUser.phone}" class="form-control" required maxlength="200" oninput = "value=value.replace(/1[34578]\\d{9}/g,'')"/>
										</div>
									</div>
								</div>
							</div>

2、获取id

<input type="hidden" value="${appUser.id}" name="id" id="userId"/>

3、ajax传值

 rules: {
				   phone: {
					   remote: {
						   type: "get",
						   dataType: "json",
						   url: "${base}/admin/app_user/check_phone.jhtml",
						   data: {
							   phone: function () {
								   return $("#phone").val();
							   },
                               userId: function () {
                                  return $("#userId").val();
                               },
						   }
					   }
				   }
                },
                messages: {
					phone: {
						required: "请输入账号",
						maxlength: "账号最多11个字符",
						remote: "账号已经存在"
					}
				}

4、controller层处理

/**
	 * 检查手机号是否存在
	 */
	@RequestMapping(value = "/check_phone", method = {RequestMethod.GET})
	@ResponseBody
	public boolean checkAccount(String phone,Long userId) {
		Long count=null;
		if (userId != null){//编辑
			 count = this.appUserService.countAppUser(phone,userId);
		}else if(userId==null) {
			 count = this.appUserService.count(Paramap.create().put("phone", phone));
		}
		if (null != count && count > 0) {
			return false;
		} else {
			return true;
		}
	}

5、除去数据本身，来进行比较

 SELECT
            COUNT(*)
        FROM
            t_app_user
        WHERE
        phone=#{phone}
        AND
        id
            NOT IN (#{id})