Question

我具有将在blur上触发的功能，并发送ajax请求来检查数据库中是否已经存在用户名。到目前为止，功能正常，但是当用户尝试更新已保存的用户名时，我发现了一个问题。这是我的代码示例：

var usernames = ["jcook","mjones","kruffy"];

$(".check-account").focus(function() {
  var submitBtn = $(this).closest("form").find(":submit");
  submitBtn.prop("disabled", true); //Disable submit button on field focus.
  $(this).attr('data-prev', $(this).val()); // Save current value in data attribute as data-prev.
  if(!$(this).data("original")){
    $(this).data("original",$(this).val());
  } 
}).blur(function() {
  var fldObj = $(this),
      submitBtn = $(this).closest("form").find(":submit");

  if (fldObj.val() !== fldObj.data('prev') && fldObj.val() !== fldObj.data("original")) {
      if ($.inArray(fldObj.val(), usernames) === -1) {
        fldObj.data("original","");
        fldObj[0].setCustomValidity("");
      } else {
        fldObj[0].setCustomValidity("User name already exist.");
      }
      submitBtn.prop("disabled", false);
  } else {
    fldObj[0].setCustomValidity("");
    submitBtn.prop("disabled", false);
  }
});

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave">
  <input type="hidden" class="form-control" name="frm_recordid" id="frm_recordid">
  <div class="form-group required">
    <label class="control-label" for="username"><span class="label label-default">UserName:</span></label>
    <input type="text" class="form-control check-account is-user" name="frm_username" id="frm_username" maxlength="50" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-11 col-lg-11">
      <div id="frm_message" class="alert"></div>
    </div>
  </div>
</form>

如果运行上面的代码示例，您将看到我的函数将捕获用户名（如果已存在）。我遇到的问题是尝试编辑数据时。假设我打开表单，用户名将具有值jcook。然后，我尝试输入其他用户名，例如mjones。如果我尝试提交表单，则会收到消息Username already exist!。然后，如果我再次尝试输入jcook，即使我只是尝试输入与该记录字段相同的值，我的代码也会触发相同的消息。我想知道如果已经为该记录保存了用户名，在这种情况下如何避免函数触发？

检查用户名是否存在？

0 个答案: