javascript - 如何在文本区域中添加最小 250 和最大 1000 字数的验证？

Question

我正在尝试在文本区域字段中添加 jquery 验证，最小 250 个单词，最大 1000 个单词。并且还在文本区域旁边的跨度标记中显示字数。另外，我还如何验证用户是否将复制粘贴到文本区域中，那么此验证也应该有效。任何帮助和建议都值得赞赏。

var maxWords = 1000;
var minWords = 250;

$(document).on('keypress', 'textarea[name="writ"]', function(e) {
  var $this, wordcount;

  $this = $(this);
  wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
  if (wordcount > maxWords) {
    $('.writing_erorr').text("You've reached the maximum allowed words 1000.");
    return false;
  } else {
    return $('#writing span').text('Total words: ' + wordcount);
  }
});

$("textarea[name='writ']").bind('paste', function(e) {
  // access the clipboard using the api
  var pastedData = e.originalEvent.clipboardData.getData('text');
  alert(pastedData);
  var $this, wordcount;

  $this = $(this);
  wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
  if (wordcount > maxWords) {
    $('.writing_erorr').text("You've reached the maximum allowed words 1000.");
    return false;
  } else {
    return $('#writing span').text('Total words: ' + wordcount);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=writing class=cond>
    <label class="required">Writing Entry</label>
    <textarea name=writ placeholder="Writing Entries: 100 words min, 600 words max"></textarea>
    <span></span>
    <div class="writing_erorr"></div>
</div>

Answer 1

下面的代码按要求工作，我向文本区域添加了一些属性，以便您可以在单个页面上拥有多个文本区域，并且所有文本区域都有不同的限制。

您需要添加以下属性word-limit="true"、max-words='n'、min-words='n' 。不再需要占位符，因为代码会在页面加载后自动生成占位符。

它比您的示例涉及更多一点，但允许您做更多事情(不确定您的整个项目是什么)。

<小时/>

字数统计

进行字数统计的基本代码如下:

wordCount = $.trim( $("#writing").val() ).split(/\s+/).filter(Boolean).length;

代码说明:

• $("#writing").val() - 获取文本区域的值(即字符串)
• .trim() 删除字符串开头或结尾的任何空格
• .split(/\s+/) 将字符串周围的每个空格分开，并将它们放入数组中
• .filter(Boolean) 跳过数组中的任何空白值 - 即由双倍间距创建的空白值
• .length 获取数组的长度(即有多少个单词)

<小时/>

演示

// Cycle through each textarea and add placeholder with individual word limits
$("textarea[word-limit=true]").each(function() {
  $(this).attr("placeholder", "Writing entries: " + $(this).attr("min-words") + " words min, " + $(this).attr("max-words") + " words max");
});


// Add event trigger for change to textareas with limit
$(document).on("input", "textarea[word-limit=true]", function() {


  // Get individual limits
  thisMin = parseInt($(this).attr("min-words"));
  thisMax = parseInt($(this).attr("max-words"));

  // Create array of words, skipping the blanks
  var removedBlanks = [];
  removedBlanks = $(this).val().split(/\s+/).filter(Boolean);
  
  // Get word count
  var wordCount = removedBlanks.length;
 
  // Remove extra words from string if over word limit
  if (wordCount > thisMax) {
        
      // Trim string, use slice to get the first 'n' values
      var trimmed = removedBlanks.slice(0, thisMax ).join(" ");
      
      // Add space to ensure further typing attempts to add a new word (rather than adding to penultimate word)
      $(this).val(trimmed + " ");
      
    }
    
 
  // Compare word count to limits and print message as appropriate
  if ( wordCount < thisMin) {
  
    $(this).parent().children(".writing_error").text("Word count under " + thisMin + ".");
  
  } else if (wordCount > thisMax) {

    $(this).parent().children(".writing_error").text("Word count over " + thisMax + ".");
  
  } else {
    
    // No issues, remove warning message
    $(this).parent().children(".writing_error").text("");

  }

});

.writing_error {
  color: red;
}

[id^=writing] {
  border-bottom: 1px solid grey;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

label {
  width: 100%;
}

textarea {
  width: 100%;
  margin-top: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=writing1 class=cond>
  <label class="required">Writing Entry 1</label>
  <textarea name=writ word-limit="true" max-words="600" min-words="100"></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>


<div id=writing2 class=cond>
  <label class="required">Writing Entry 2</label>
  <textarea name=writ></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>

<div id=writing3 class=cond>
  <label class="required">Writing Entry 3</label>
  <textarea name=writ word-limit="true" max-words="10" min-words="4"></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>