如何使用javascript或jquery计算文本框中的逗号数？

Question

点击提交按钮后，我想进行一些客户端验证，以确保提交-btn类的文本框中的逗号少于5个。我可以在这里使用javascript，jquery和/或regex。

我应该在此功能中放置什么代码？

$('.submit-btn').on("click", function() {
  << WHAT GOES HERE? >>
});

非常感谢任何帮助。

Answer 1

我使用正则表达式来查找字符串,出现在文本框值中的次数。它打印是否有效（少于5个逗号）。

$("#validate").click(function () {
  console.log(($("#textboxInfo").val().match(/,/g)||[]).length < 5)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textboxInfo" />
<button id="validate">less than 5 commas?</button>

自动响应用户输入

在这种特殊情况下，我更愿意进行实时验证。这可以通过使用input事件来完成。

$("#textboxInfo").on('input', function () {
  var isValid = ($(this).val().match(/,/g) || []).length < 5;
  $(".isValid").html(isValid ? "Valid" : "Invalid");
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textboxInfo" value="I really love ,,, commas!" />
<div class="isValid">&nbsp;</div>

Answer 2

Split输入框的值和filter输出,并检查其长度

$('.submit-btn').on("click", function() {
  var getNumbers = $('#testBox').val().split('').filter(function(item) {
    return item === ','
  }).length;
  console.log(getNumbers)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='testBox'>
<button class='submit-btn' type="button">Click</button>

Answer 3

您可以尝试使用此Comma Counter

$('button').on('click',function(){ var counter = ($('div').html().match(/,/g) || []).length; $('.result').text(counter); } ) /

Answer 4

您还可以删除不是逗号[^,]的所有内容，将其替换为空字符串并计算字符串的长度。

＆＃13;

＆＃13;

$('.submit-btn').on("click", function() {
  var nr = $("#tbx").val().replace(/[^,]/g, "").length;
  console.log("Fewer than 5 commas? " + (nr < 5 ? "Yes" : "No") + " there are " + nr + " commas.");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tbx'>
<button class='submit-btn' type="button">Click</button>

＆＃13;

＆＃13;

＆＃13;