Question

我正在尝试制作一个小而简单的网络应用来计算人的年龄。如果我编译我的程序，它会给出“无法读取长度属性为null”的错误。我不知道为什么它将arr作为null。我试图检查我的arr并在chrome开发人员工具中运行它并且它给出了期望的结果。例如，如果我们在输入中包含12/13/1995，则arr应该是长度为4.但是如果我检查开发人员工具的控制台它会给出null错误...我无法弄清楚问题。

$(document).ready(function() {
  $("input").focus(function() { //whenever user focus at input placeholder value should be mm/dd/yyyy
    $("input").attr("placeholder", "mm/dd/yyyy");
  });
  
  $("button").on("click", function() { //on click function on button GO
    var $inp = $("input").val(); //getting the value of input field
    var regex = /(\d{1,2})\/(\d{1,2})\/(\d{4})/gi; //regular expression for date format
  
    if (regex.test($inp) === false) { //if format is not followed input is invalid
      $("input").attr("placeholder", "Please write valid input").val("");
    }
    
    var arr = regex.exec($inp); //making array of input field value ['12/13/1995','12','13','1995']
    var numarr = [];
    
    for (var i = 1; i < arr.length; i++) { //loop to convert string into numbers
      var n = Number(arr[i]); //converting into numbers
    
      if (i === 1 && n > 12 || i === 2 && n > 31) { //if invalid input day is 32 or month is 13
        $("input").attr("placeholder", "Please write valid input").val("");
      } else {
        numarr.push(n); //if valid push that number into numarr. 
      }
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="container-fluid text-center" id="head">
  <h1>Whats my alive time</h1>
</div>
<div class="container text-center" id="enter">
  <div class="row" style="display: flex; justify-content: center;">
    <h3 style="display: inline-block; margin-right: 0.5em; ">Enter your birth date:</h3>
    <input type="text" class="form-control col-3" placeholder="mm/dd/yyyy"></input>
    <button type="submit" class="btn btn-primary col-1">GO</button>
  </div>
</div>

Answer 1

好吧，伙计们，我刚刚在这里找到了一些奇怪的东西。如果我们删除＆＃34; g＆＃34;来自正则表达式的标识符.Phewww !!! 3个小时后，社区被证明对我很幸运，但我仍然无法理解这种行为。它为什么这样做？

Answer 2

正则表达式中的g只是问题的一部分。删除代码的（regex.test（$ inp）部分，你会看到一切正常，即使使用g。

这是因为＆＃34;如果正则表达式设置了全局标志，test（）将提升正则表达式的lastIndex。随后使用test（）将在lastIndex指定的str的子字符串处开始搜索（exec（）也将使lastIndex属性前进）。＆＃34;

这会导致regex.exec（$ inp）返回null，因为它与test（）使用的是相同的正则表达式。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

您可以简单地创建第二个正则表达式以与exec（）一起使用。

＆＃13;

$(document).ready(function() {
  $("input").focus(function() { //whenever user focus at input placeholder value should be mm/dd/yyyy
    $("input").attr("placeholder", "mm/dd/yyyy");
  });
  
  $("button").on("click", function() { //on click function on button GO
    var $inp = $("input").val(); //getting the value of input field
    var regex = /(\d{1,2})\/(\d{1,2})\/(\d{4})/gi; //regular expression for date format and use with test()
    var regex2 = /(\d{1,2})\/(\d{1,2})\/(\d{4})/gi; //regular expression for date format and use with exec()
  
    if (regex.test($inp) === false) { //if format is not followed input is invalid
      $("input").attr("placeholder", "Please write valid input").val("");
    }
    
    var arr = regex2.exec($inp); //making array of input field value ['12/13/1995','12','13','1995']
    var numarr = [];
    
    for (var i = 1; i < arr.length; i++) { //loop to convert string into numbers
      var n = Number(arr[i]); //converting into numbers
    
      if (i === 1 && n > 12 || i === 2 && n > 31) { //if invalid input day is 32 or month is 13
        $("input").attr("placeholder", "Please write valid input").val("");
      } else {
        numarr.push(n); //if valid push that number into numarr. 
      }
    }
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="container-fluid text-center" id="head">
  <h1>Whats my alive time</h1>
</div>
<div class="container text-center" id="enter">
  <div class="row" style="display: flex; justify-content: center;">
    <h3 style="display: inline-block; margin-right: 0.5em; ">Enter your birth date:</h3>
    <input type="text" class="form-control col-3" placeholder="mm/dd/yyyy"></input>
    <button type="submit" class="btn btn-primary col-1">GO</button>
  </div>
</div>

＆＃13;

jQuery未知错误

2 个答案: