Question

我正在尝试使用它，因此当用户在txtNmr字段中输入字符串时，他们会得到一个输出，说输入数字。目前，我所拥有的无法正常工作，并且无法打印任何内容。我知道还有其他方法，但是我想使用正则表达式。

    function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    found_position = txtNmr.search(/\d/);
    if (found_position = -1){
      $("#errors").append("Enter a number not a string");
      $("#errors").css("background-color", "yellow");
    }
    
if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Answer 1

/^\d$/表示'0'或'1'或'2'或'3'或'4'或'5'或'6'或'7'或'8'或'9'。与此不同的任何字符串都将被拒绝，例如'10'被拒绝。

要通过10到20加上其余数字，可以将reg exp更改为：/^\d{1,2}$/，这意味着任何由一到两位数字组成的字符串，因此以下有效：'01'，'2'，'15'，'84' ...

请注意，我添加了^，这意味着字符串必须以开头，以及$，这意味着字符串必须以结尾。

我还认为您的代码有误，应该是：

found_position = nr.search(/\d/);

代替：

found_position = txtNmr.search(/\d/);

因此，使用正确的reg exp：

found_position = nr.search(/^\d{1,2}$/);

另一个错误，测试条件不正确：

if (found_position = -1)

应该是：

if (found_position == -1)

请注意双==

Answer 2

您只是测试字符串是否以数字开头，您需要检查其所有数字。

正则表达式解释：https://regexr.com/42t4f

    function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    if (/^\d+$/.test(nr) === false){
      $("#errors").append("Enter a number not a string");
      $("#errors").css("background-color", "yellow");
    }
    
if (nr > 0 && nr < 21) {
    for (var counter = 0; counter < nr; counter = counter + 1) {
      $("#greetings").append("Hello, " + name + "<br />");
    }
  } else {
    $("#errors").append("Please Enter A Number Between 1 and 20");
    $("#errors").css("background-color", "yellow");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

Answer 3

您应使用String.prototype.match检查字符串是否与正则表达式匹配。

String.prototype.search在字符串中找到匹配项的索引，这不能很好地指示字符串是否与正则表达式真正匹配。

要仅匹配整数，应使用正则表达式/^\d+$/

此外，您应该在第一个条件（输入为数字）周围放置if / else。否则，它仍会在错误消息（输入应为数字）之后显示问候语。

 function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    
    var found = nr.match(/^\d+$/);
    if (!found){
      $("#errors").append("Enter a whole number, not a string or a decimal");
      $("#errors").css("background-color", "yellow");
    } else {
      if (nr > 0 && nr < 21) {
       for (var counter = 0; counter < nr; counter = counter + 1) {
          $("#greetings").append("Hello, " + name + "<br />");
       }
    } else {
      $("#errors").append("Please Enter A Number Between 1 and 20");
      $("#errors").css("background-color", "yellow");
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

在没有正则表达式的情况下，您将字符串转换为数字，然后向下舍入，然后检查转换为字符串的舍入后的数字是否等于原始字符串，并且该数字是否大于或等于0。

function isPositiveInteger(str) {
    var n = Math.floor(+str);
    return n !== Infinity && String(n) === str && n >= 0;
}

 function greetMe() {
    $("#errors").css("background-color", "white");
    var name = document.getElementById("txtName").value;
    var nr = document.getElementById("txtNmr").value;
    $("#errors").empty();
    $("#greetings").empty();
    if (!isPositiveInteger(nr)){
      $("#errors").append("Enter a whole number, not a string or a decimal");
      $("#errors").css("background-color", "yellow");
    } else {
      if (nr > 0 && nr < 21) {
       for (var counter = 0; counter < nr; counter = counter + 1) {
          $("#greetings").append("Hello, " + name + "<br />");
       }
    } else {
      $("#errors").append("Please Enter A Number Between 1 and 20");
      $("#errors").css("background-color", "yellow");
    }
  }
}
function isPositiveInteger(str) {
    var n = Math.floor(+str);
    return n !== Infinity && String(n) === str && n >= 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
  <!-- Section to output the greeting -->
</div>
<div id="errors">
  <!-- Section to output the greeting -->
</div>

jQuery正则表达式检查用户输入的数字

3 个答案: