如何设置文本框中写入的最小字数？

Question

我想设置一个文本框中写入的最小文本数。

通常我们使用html的min属性。但我不想要它。

任何人都可以帮助我使用JavaScript代码来检查文本框中写入的文本数量，如果它小于7且大于21，则会显示一个警告框。否则它不会

<input type="text" id="txt">
<input type="button" onClick="myFunction()">

JS

function myFunction() {
   .....
}

我只知道这一点。 请帮忙

Answer 1

function myFunction() {
 if ($('#txt').val().length < 21 && $('#txt').val().length > 7) alert("yez");
}

$('button').on('click', function() {
  myFunction()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt">
<button>click</button>

这应该工作 - 它检查#txt HTML元素中的内容的长度。如果它大于7且小于21，它将警告yez

Answer 2

您可以使用HTML5的模式属性

This will set minimum characters required to 1 and max characters required 
to 15

<input type="text" id="txt" pattern="[a-z]{1,15}>

Answer 3

我添加了一个片段，它只计算实际'单词'的数量，省略了空格。

function wordCount(text) {
  totalCount = 0;
  words = text.split(' ')
  words.forEach(function(word) {
    if (word.length > 0) {
      totalCount++;
    }
  })
  
  return totalCount;
}

window.myFunction = function() {
 textarea = document.getElementById('txt');
 words = wordCount(textarea.value);
 if(words < 7 || words > 21) {
   alert('Wrong number of words');
 }
}

<input type="text" id="txt">
<input type="button" onClick="myFunction()" value="Submit">

Answer 4

您可以在blur上触发事件，这意味着，当文本框失去焦点时

$(document).ready(function(){
	$('#text-box').blur(function(){
    	var value = $('#text-box').val();
        if(value.length < 7 || value.length > 21){
        	alert("Invalid length");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text-box">

Answer 5

function validate（）{

x=document.myForm
input=x.myInput.value
if (input.length>5){
    alert("The field cannot contain more than 5 characters!")
    return false
}else {
    return true
}

}