Как установить минимальную и максимальную длину символа в текстовом поле с помощью javascript

Если у меня есть текст, и я хочу разрешить пользователю вводить текст длиной от 5 до 10 символов, как это сделать с помощью javascipt?

Я пробовал использовать mix и max функции, но они работают только для числовых данных.

5 ответов


вы можете сделать что-то вроде этого:

`

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()" />
`

вам нужно использовать атрибут maxlength для полей ввода, что-то вроде этого должно сделать это:

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

вы можете использовать атрибут "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();      
})

Я сделал немного смеси образцов выше, пытаясь сделать его как можно проще и избежать ненужных предупреждений. Сценарий:

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>

надеюсь, что это помогает!


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

это сделает трюк, если вы не хотите проблем с js.