為什么我的charAt函數不能按我的預期工作？

Question

我正在嘗試創建一個函數來限制<input>接受的格式，當滿足格式時，它旁邊的<div>將被隱藏。 （格式為I-xxxx-xxxx，而前兩個字符為I和- ，而第七個字符為另一個- ）

這是我的<input>和<div>的細分

這是我用來檢查<input>的函數，如果滿足格式，它將隱藏<div> 。

var referenceChecker = document.getElementById("reference_number").value;
var iChecker = referenceChecker.charAt(0);
var firstDashChecker = referenceChecker.charAt(1);
var lastDashChecker = referenceChecker.charAt(6);

function checkIfEmptyReferenceNumber(that) {
  if (that.value == "") {
    document.getElementById("ifEmptyReferenceNumberMessage").style.display = "block";
  } else {
    if (iChecker = "I" && firstDashChecker = "-" && lastDashChecker = "-") {
      document.getElementById("ifEmptyReferenceNumberMessage").style.display = "none";
    }
  }

<input id="reference_number" onchange="checkIfEmptyReferenceNumber(this)"
 class="form-control" maxlength="11" type="text" ng-required="true" 
 ng-model="reference_number" onkeyup="this.value = this.value.replace(/[^I0-9-]/g, '')" />

<div id="ifEmptyReferenceNumberMessage" style="display: block;"><span style="color: red;">Reference Number Needed!</span></div>

我很抱歉，但我無法弄清楚哪里錯了。

Answer 1

如何使用另一種方法？ 不檢查而是執行模式：

 var input = document.querySelector("input"); input.onchange = input.oninput = input.onfocus = input.onkeydown = function(e){ let digits = input.value.replace(/\\D/g, ""); if(e && e.type === "keydown" && e.key === "Backspace"){ digits = digits.substr(0, digits.length-1); } let text = "I-" + digits.slice(0, 4).padEnd(4, "x") + "-" + digits.slice(4, 8).padEnd(4, "x"); input.value = text; input.setSelectionRange(text.indexOf("x"), text.length); } input.onchange(); 

 input:invalid { background: #FDD; } input:valid { background: #8F8; } 

 <input type="text" pattern="I-\\d{4}-\\d{4}"/>