jquery - 如何使用 jQuery onsubmit 并检查值是否为 2 - 5 个字符？

Question

假设我有一个文本字段：

Username: <input type="text" id="username" class="required" />
<input type="submit" />

我有一些 jQuery：

$(document).ready(function() {
    user = $("#username");

    user.submit(function() {

    })
})

我想在提交username后检查输入的值的长度是否在 2 - 5 个字符之间。如果不是，那么就会发生一些事情。

我不太确定我应该在user.submit(function(){}).

Answer 1

首先你需要一个实际的表格：

<form id="myForm">
    Username: <input type="text" id="username" class="required" />
    <input type="submit" />
</form>

然后：

$(document).ready(function(){
    $('#myForm').on('submit', function(e){
        e.preventDefault();
        var len = $('#username').val().length;
        if (len < 6 && len > 1) {
            this.submit();
        }
    });
});

或者在 HTML5 中，您可以使用该pattern属性（在 Safari 和 IE9 及以下版本中不支持）：

<!-- Fiddle: http://jsfiddle.net/ymdQq/ -->

<form id="myForm">
  Username: <input type="text" id="username" pattern=".{2,5}" required />
  <input type="submit" />
</form>

Answer 2

$(document).ready(function() {
  $("#form").submit(function(e) {
    length = $("#username").val().length;
    if ((length > 2 && length < 5)) {
      $("#output").html("correct, logging in");
    } else {
      $("#output").html("incorrect, must have 3 or 4 chars");
    }
    return (length > 2 && length < 5);
  });
});

<!-- Fiddle: http://jsfiddle.net/zoutepopcorns/b5Kqs/ -->

<form id="form" mehtod="POST" action="https://www.example.com">
  username: <input type="text" id="username" class="required" />
  <input type="submit" />
</form>

<div id="output"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您可以使用 来检查输入字段的值user.val()和字符串的长度user.val().length。

这样你就可以做这样的事情：

if(user.val().length < 2 || user.val().length > 5) {
    console.log('test')
} 

Answer 4

绑定提交form而不是输入类型文本并在提交事件中检查其值。最好为表单分配一些 id 并使用表单 id 选择器来绑定提交。

$('form').submit(function(){
      username = $('#username').val();
     if(username.length > 1 && username.length < 6)
     {
     }
});