2013-03-27 38 views
13

比方說,我有一個文本字段:如何使用jQuery來提交併檢查值是否爲2-5個字符?

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(){})之內。

回答

31

首先,您需要一個實際的形式:

<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和以下):

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

FIDDLE

1

綁定提交到form而不是輸入類型文本並在提交事件中檢查其值。最好是分配一些id來形成並使用表單id選擇器來綁定submit。

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

您可以使用user.val()檢查輸入字段的值,並使用user.val().length檢查字符串的長度。

這樣,你可以做這樣的事情:

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

我做了一個Fiddle

您可以使用的語句作爲

$(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); 
    }); 
}); 

和HTML

<form id="form" method="POST" action="http://www.cnn.com"> 
username: <input type="text" id="username" class="required" /> 
<input type="submit" /> 

相關問題