如何使用javascript在文本框中设置最小和最大字符长度答案

【问题标题】：How to set min and max character length in a textbox using javascript如何使用javascript在文本框中设置最小和最大字符长度
【发布时间】：2014-01-16 21:13:44
【问题描述】：

如果我有一个文本并且我只想允许用户输入 5 到 10 个字符长的文本，我该如何使用 javascipt 来做到这一点？

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

【问题讨论】：

标签： string textbox character max min

【解决方案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()" />
`

【讨论】：

这将长度限制为最多 5 个字符，这与所要求的完全不同。（此外，它确实适用于代码单元，而不是字符。）
@JukkaK.Korpela 我刚刚修改了我的答案以反映修改后的字符长度。以前，问题将限制指定为 0 到 5 个字符。

【解决方案2】：

您需要为输入字段使用 maxlength 属性，应该这样做：

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

【讨论】：

是的，我已经这样做了。但是，我想要的是不小于 5 个字符且不大于 10 个字符的字符串。抱歉，我在上面输入 0 而不是 10。
你需要用 javascript 解决这个问题，@rboling 有一个不错的解决方案
没关系。我第一次输入的是 0 而不是 10。不过还是谢谢你的回答！欣赏它

【解决方案3】：

您可以使用“maxlength”属性来禁止超过 x 个字符并使用 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();      
})

【讨论】：

感谢这项工作也很完美，尽管我不得不将其更改为 javascript 而不是 jquery。我所要做的就是将 .value 添加到 var textbox = document.getElementById("textbox").value;它奏效了。感谢 user3071372 和 @rboling

【解决方案4】：

我对上面的示例做了一些混合，试图使其尽可能简单并避免不必要的警报。脚本：

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>

希望这会有所帮助！

【讨论】：

【解决方案5】：

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

如果您不想在 js 上遇到麻烦，这会解决问题。

【讨论】：