Question

我有以下内容来检查输入的文字是否有逗号。

$("#keywords").change(function() {
    if (this.value.indexOf(",") == -1) {
        alert('Please separate multiple keywords with a comma.');
    }
});

我基本上想要一种方法来告诉用户他是否输入了多个没有逗号的单词，他需要用逗号分隔它。上述变化事件似乎每次都会触发。我相信有一个更好的事件要做到这一点。任何人都可以建议。感谢

Answer 1

检查用户是否输入了多个单词，即如果该值包含空格，则显示该消息。

if(this.value.indexOf(" ") > -1) {

我建议您在输入中使用pattern，如下所示。

[a-zA-Z]+(,\s*[a-zA-Z]+)*

Regex online Demo and Explanation

[a-zA-Z]+：允许一个或多个字母表，包括lowerCase和upperCase
(,\s*[a-zA-Z]+)*：允许以逗号开头的字符串中的零个或多个由可选空格分隔，然后是一个或多个字母。

＆＃13;

span {
  display: none;
  color: red;
}
input:invalid {
  border: solid 1px red;
}
input:invalid ~ span {
  display: block;
}

＆＃13;

<input id="keywords" pattern="[a-zA-Z]+(,\s*[a-zA-Z]+)*" /><span>Keywords should be separated by comma</span>

＆＃13;

Answer 2

您可以在用户提交数据时验证输入：

$('#warningMessage').hide()
$('#submit').click(function(e) {
  var isValid = true;
  $('#value').each(function() {
    if (($.trim($(this).val()).indexOf(",") == -1)) {
      //alert('Please separate multiple keywords with a comma.');
      $('#warningMessage').show();
    } else {
      $('#warningMessage').hide()
    }
  });
  if (isValid == false) e.preventDefault();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="label">Value</div>
<input type="text" id="value" name="value" />
<br />
<div style="margin-left:140px;">
  <input type="submit" name="submit" value="Submit" id="submit" />
</div>
<div style="color:orange;" id="warningMessage"><b>Please separate multiple keywords with a comma</b>
</div>

Answer 3

onchange 的事件可以执行此操作。另一件事是如果用户只写一个关键字 - 那么它应该提醒他吗？

添加空格检查 - 如果没有任何不显示消息（一个关键字）。

Answer 4

如果您正在使用jQuery验证器，那么您可以注册自定义验证器：

jQuery.validator.addMethod("checkComma", function(value, element) {
        var words = value.split(" ").length;
        var commas = value.split(",").length;
        // For n number of comma, there must be n + 1 spaces i.e. words
        return words === (commas + 1)
    },
    "Please separate multiple keywords with a comma."
);

现在，在您的输入字段中，添加以下验证程序：

<input type="text" name="myname" check-comma="" />

或者您可以使用与使用相同的逻辑：

$("#keywords").change(function() {
    var words = value.split(" ").length;
    var commas = value.split(",").length;
    // For n number of comma, there must be n + 1 spaces i.e. words
    if (words != (commas + 1)) {
        alert('Please separate multiple keywords with a comma.');
    }
});

jquery验证用逗号输入的文本

4 个答案: