Question

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

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

我当时想在getSum函数中的某处需要If Else语句，但不确定将其放在何处。如您所见，getSum函数首先循环输入数组，然后在.forEach中，它从每个输入字段中提取值。

我认为这可能是开始if else语句的地方，因为这是确定两个输入值的地方。我只需要一种方法就可以将这两个值与我的正则表达式进行比较，如果它们匹配，则可以正常运行其余代码。如果它们不匹配，则带有警报的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>

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

1 个答案: