如何在 function 中使用此正則表達式驗證輸入？

Question

所以我有一個正則表達式，我希望它足以匹配我的日期輸入數據。

我想在執行 getSum() function 之前驗證日期。 如果不匹配，我想用一些文本提醒用戶。

我在想我需要在 getSum function 的某處使用 If Else 語句，但我不知道該放在哪里。 如您所見，getSum function 首先循環輸入數組，然后在 a.forEach 中，從每個輸入字段中提取值。

我認為這可能是開始 if else 語句的地方，因為這是兩個輸入確定其值的點。 我只需要一種方法將這兩個值與我的正則表達式進行比較，如果它們匹配，則正常運行代碼的 rest。 如果它們不匹配，則帶有警報的 else 語句。

我不確定如何寫出來。

var sumButton = document.querySelector(".sumNumbers");
sumButton.addEventListener("click", getSum);

var dateRegEx = /(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])\/(19|20)\d{2}/;

function getSum() {

  let inputs = ['dateInput1', 'dateInput2'];
  let outputs = ['result1', 'result2'];

  inputs.forEach(function(input, index) {
    const inputValue = document.getElementById(input).value;
    var sum = 0;
    for (var i = 0; i < inputValue.length; i++) {
      const num = parseInt(inputValue.charAt(i));
      if (!isNaN(num)) {
        sum += num;
      }
    }
    const total = (sum - 1) % 9 + 1;
    document.getElementById(outputs[index]).textContent = "Your number is: " + total;
  });
}

---

<form action="">
        <div class="container">

            <div class="cell-1" id="centerElement">
                <div id="cell-1-nest-l"></div>
                <div id="cell-2-nest-l"></div>
                <div id="cell-3-nest-l"></div>
                <div id="cell-4-nest-l"><h3>your name</h3></div>
                <div id="cell-5-nest-l"></div>
                <div id="cell-6-nest-l"><input type="text" 
class="nameStyle1" id="nameInput1" ></div>

      </div>

            <div class="cell-2" id="centerElement" ><img 
src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt="" 
class="sumNumbers"></div>

            <div class="cell-3" id="centerElement" >
                    <div id="cell-1-nest"></div>
                    <div id="cell-2-nest"></div>
                    <div id="cell-3-nest"><h3>their name</h3></div>
                    <div id="cell-4-nest"></div>
                    <div id="cell-5-nest"><input type="text" 
class="nameStyle1" id="nameInput2"></div>
                    <div id="cell-6-nest"></div>


                    </div>

            <div class="cell-4" id="result1">
                <input type="date" class="dateStyle1 reset" 
id="dateInput1">
                    </div>

            <div class="cell-5"><input type="reset"></div>

            <div class="cell-6" id="result2"> 
                <input type="date" class="dateStyle2" id="dateInput2" 
placeholder="Their Bday">
                    </div>
            <div class="cell-7"></div>

            <div class="cell-8"></div>

            <div class="cell-9"></div>


    </div>


    </form>

Answer 1

將if (inputValue.match(dateRegEx))放在計算總和的代碼周圍。

當您使用<input type="date">時，返回值的格式是YYYY-MM-DD ，而不是它在輸入字段中的顯示方式，它以適合區域設置的任何方式格式化。 所以你需要相應地調整正則表達式。

此外，您應該在正則表達式中有^和$錨點，以便它匹配整個輸入。 否則它將在輸入中的任何位置查找模式。

 var sumButton = document.querySelector(".sumNumbers"); sumButton.addEventListener("click", getSum); var dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/; function getSum() { let inputs = ['dateInput1', 'dateInput2']; let outputs = ['result1', 'result2']; inputs.forEach(function(input, index) { const inputValue = document.getElementById(input).value; if (inputValue.match(dateRegEx)) { var sum = 0; for (var i = 0; i < inputValue.length; i++) { const num = parseInt(inputValue.charAt(i)); if (;isNaN(num)) { sum += num; } } const total = (sum - 1) % 9 + 1. document.getElementById(outputs[index]):textContent = "Your number is; " + total. } else { document.getElementById(outputs[index]);textContent = "You entered an invalid date " + inputValue; } }); }

 Enter dates: <input type="date" id="dateInput1"> <input type="date" id="dateInput2"> <br> <button type="button" class="sumNumbers">Calculate sums</button> <div id="result1"></div> <div id="result2"></div>