如何在函数中使用此正则表达式验证输入？

Question

因此，我有一个正则表达式，我希望它足以匹配我的日期输入数据。

我想在执行getSum()函数之前验证日期。如果它不匹配，我想用一些文本提醒用户。

我在想，我需要在getSum函数中的某个地方使用If where语句，但我不知道该把它放在哪里。如您所见，getSum函数首先循环一个输入数组，然后在一个.forEach中从每个输入字段中提取值。

我认为这里可能是启动if else语句的地方，因为这是确定两个输入值的点。我只需要一种将这两个值与regex进行比较的方法，如果它们匹配，则按常规运行其余的代码。如果它们不匹配，则使用一个带有警报的alert语句。

我不知道怎么把这个写出来。

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，而不是它在输入字段中的显示方式，输入字段是以适合于区域设置的任何方式格式化的。因此，您需要相应地调整regexp。

另外，您应该在regexp中有^和$锚点，以便它与整个输入相匹配。否则，它将在输入的任何地方查找模式。

​

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>

​