为什么 checkValidty() 返回 false？

Question

我有焦点/模糊功能，禁用focus 上的提交按钮，然后在blur 检查值是否不同于原始值（我将原始值保留在现有记录的数据属性中）并检查是否有效。但是我注意到我的代码中断的一种情况。例如，在我的示例中，如果您输入 07AB，代码函数将返回 false，您将看到消息 Code already exist.。然后如果我输入07ab（刚刚输入小写a和b的代码值）那么函数将不会被触发并且用户能够提交表单。我确实使用console.log() 来检查模糊函数内部的if 语句，并且似乎checkValidty() 为07AB 返回true，但为07ab 返回false。这是代码示例：

var codes = ["07AB","110A","117B","0316"]
$(".check-value").focus(function() {
  var submitBtn = $(this).closest("form").find(":submit").prop("disabled", true); //Disable submit button on field focus.
}).blur(function() {
  var fldObj = $(this),
    frmMessage = $(this).closest("form").find(".message-submit"),
    submitBtn = $(this).closest("form").find(":submit");

  if (String(fldObj.val()) !== String(fldObj.data("current")) && fldObj.get(0).checkValidity()) {
  	console.log("Check value.");
    if ($.inArray(fldObj.val(), codes) === -1) {
      fldObj.get(0).setCustomValidity("");
    } else {
      fldObj.get(0).setCustomValidity("Code already exists!");
    }
    submitBtn.prop("disabled", false);
  } else {
    fldObj.get(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">
  <div class="form-group required">
    <label class="control-label" for="code"><span class="label label-primary">Code:</span></label>
    <input type="text" class="form-control check-value" name="frm_code" id="frm_code" data-current="" data-fldname="code" maxlength="4" pattern="[a-zA-Z0-9]{1,4}$" title="Code field allows alphanumeric characters only (must be four characters length) - no other special characters"
      placeholder="Example: 07AB" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <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-12 col-lg-12">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

Answer 1

小写和大写字母是不同的字符，具有不同的 ascii / utf / latin / etc 数字关联。要解决您的问题，请使用正则表达式来检查相等性，或者在您的输入中使用 .toLowerCase 或 .toUpperCase。

if ($.inArray(fldObj.val().toUpperCase(), codes) === -1) { //added toUpperCase()
  fldObj.get(0).setCustomValidity("");
} else {
  fldObj.get(0).setCustomValidity("Code already exists!");
}