如何使用JavaScript设置文本框的最小和最大字符长度

Question

如果我有一段文本，我只想允许用户输入5到10个字符长度的文本，如何使用JavaScript实现？

我尝试使用mix和max函数，但它们仅适用于数值数据。

- cala

Answer 1

你可以这样做：

`

function checkLength(){
    var textbox = document.getElementById("textbox");
    if(textbox.value.length <= 10 && textbox.value.length >= 5){
        alert("success");
    }
    else{
        alert("make sure the input is between 5-10 characters long")
    }
}
</script>
<input type="text" id="textbox"></input>
<input type="submit" name="textboxSubmit" onclick="checkLength()" />
`

- rboling

---

这将长度限制在最多5个字符，与要求的完全不同。（此外，它实际上是在代码单元上工作，而不是字符。） - Jukka K. Korpela

@JukkaK.Korpela 我刚修改了我的答案以反映修改后的字符长度。以前，问题规定限制范围为0到5个字符。 - rboling

Answer 2

您需要在输入字段中使用maxlength属性，类似这样的做法应该可以：

<input name="myTextInput" type="text" maxlength="5"></input>

- njfife

---

是的，我已经做过了。但是，我想要的是字符串不少于5个字符，也不超过10个字符。抱歉，我之前打成了0而不是10。 - cala

你需要用JavaScript来解决这个问题，@rboling提供了一个不错的解决方案。 - njfife

没关系，我第一次打错了，输成了0而不是10。不过还是谢谢你的回答！非常感激。 - cala

Answer 3

我在以上示例的基础上进行了一些混合，尽可能地使它简单，并避免不必要的警报。

脚本:

function checkLength(){
    var textbox = document.getElementById("comment");
    if(textbox.value.length <= 500 && textbox.value.length >= 5){
        return true;
    }
    else{
        alert("Your comment is too short, please write more.");
        return false;
    }
}

表单字段中的代码应为：onsubmit="return checkLength();"

表单中的文本区域：

<label for="comment">*Comment:</label>
<textarea name="comment" id="comment" rows="4" cols="40" required="required"></textarea>

希望这能帮到你！

- Marc F

Answer 4

你可以使用 "maxlength" 属性来限制输入字符数，并使用 JavaScript 进行最小长度验证。

看这个例子：http://jsfiddle.net/nZ37J/ HTML

<form id="form_elem" action="/sdas" method="post">
   <input type="text" id="example" maxlength="10"></input>
   <span id="error_msg" style="color:red"></span>
   <input type="button" id="validate" value="validate"></input>
</form>

Javascript:

$("#validate").click(function(){
    var inputStr = $("#example").val();
    if(inputStr.length<5)
        $("#error_msg").html("enter atleast 5 chars in the input box");
    else
        $("#form_elem").submit();      
})

- hemanth

---

谢谢，这个也完美无缺，尽管我不得不将它改成JavaScript而不是jQuery。我所要做的就是在var textbox = document.getElementById("textbox").value;上添加.value，然后它就可以工作了。感谢user3071372和@rboling。 - cala

Answer 5

<input name="myTextInput" type="text" minlength="5" maxlength="10"></input>

这将起到作用，如果您不想麻烦使用js。

- Delbin Thomas