Question

我正在尝试使用jQuery在输入短于给定限制时显示警告消息。不幸的是，我的代码无效，因此，寻求你的帮助。

以下是我正在使用的代码。

HTML

<input type="textarea" name="message" id="message" row="20" col="50" />
<input type="submit" name="submit" id="submit" value="Send Message" />

的JavaScript

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("input:submit[name='submit']").on("click",function() {
        var msgwords = $("input:textarea[name='message']").val().replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
        var minwords = 10;
            if (comwords < minwords) {
                alert("Your Comment is too short.");
            }
        });
    });
</script>

Answer 1

您想将if(comwords < minwords)切换为if(msgwords < minwords)

这是您完全正常工作的代码。根据需要改变。

<script type="text/javascript">
/* Use $ instead of `jQuery`, it's nicer */
$(document).ready(function() {
    /* Reference the button ID (it's unique...) */
    $("#submit").click(function(e) {
        /* Your function to replace works nicely */
        var msgwords = $("#message").val().replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
        var minwords = 10;
        if (msgwords < minwords) {
            e.preventDefault();
            alert("Your Comment is too short.");
        } 
    });
});
</script>

此代码引用了确切的ID（您可以在知道它正常工作后更改此代码）。您的分割功能检查单词而不是字符也可以很好地工作。最后，如果评论太短，e.preventDefault()会阻止按钮提交。

我还想指出，您可以使用e.preventDefault();或return false，后者相当于e.preventDefault();和{{ 1}}。这可以防止该事件传播（或“冒泡”）DOM。

Answer 2

有两个问题。

没有这样的:textarea伪选择器。
comwords未定义。

无论如何，您都可以从选择器中删除:textarea。并使用msgwords代替comwords。

我会改为：

使用.form()绑定到submit事件。另外，阻止表单提交。
使用String#trim清理行距和尾随空格。
使用元素的id属性;）

沿着这些方向：

<form>
  <input type="textarea" name="message" id="message" row="20" col="50" />
  <input type="submit" name="submit" id="submit" value="Send Message" />
</form>

jQuery(function($) {
  $("form").submit(function () {
    var minwords = 10;
    /* Trim leading and trailing spaces */
    var message = $("#message").val().trim();
    var words = message.split(/\s+/).length;
    /* Disambiguous matches for an empty string  */
    if ((message == "") || (words < minwords)) {
      alert("Your comment is too short.");
      /* Prevent form submission by returning false */
      return false;
    }
    return true;
  });
});

使用jQuery输入太短时显示警报消息

2 个答案: