如何验证文本区域？它可能不为空答案

【问题标题】：How do I validate a textarea? It may not be empty如何验证文本区域？它可能不为空
【发布时间】：2020-09-24 10:55:13
【问题描述】：

我需要向我的文本区域添加验证。例如，它可能不少于 5 个字符。它需要实时发生，当它为空或少于 5 个字符时，它应该在下方显示一条错误消息。

HTML

<label for="meddelande"></label>
<textarea name="meddelande" id="meddelande" cols="30" rows="10" placeholder="Ditt meddelande..."></textarea>
<p>Skriv gärna något!</p>

我被困住了。我让它可以使用正则表达式作为验证和 YT 指南。但我想我将这种验证转化为一种验证的知识超出了我的能力范围（现在......）

【问题讨论】：

if e.target.value.length
另见：stackoverflow.com/questions/13643417/…

标签： javascript html jquery

【解决方案1】：

const textarea = document.querySelector('#meddelande');

textarea.addEventListener('keydown', event => {
  const error = document.querySelector('#error');
  error.style.display = event.target.value.length >= 4 ? "none" : "block";
});

<label for="meddelande"></label>
<textarea name="meddelande" id="meddelande" cols="30" rows="10" placeholder="Ditt meddelande..."></textarea>
<p class="notice">Skriv gärna något!</p>
<p id="error">Type at least 5 characters</p>

【讨论】：

【解决方案2】：

您可以在 Javascript 中监听按键来实现这一点。

<label for="meddelande"></label>
<textarea name="meddelande" id="meddelande" cols="30" rows="10" placeholder="Ditt meddelande..."></textarea>
<p class="notice">Skriv gärna något!</p>

<script>
const noticeElement = document.querySelector('.notice');
const textarea = document.querySelector('#meddelande');

textarea.addEventListener('keydown', validate);

function validate() {
  if (this.value < 5) {
     return noticeElement.style.display = "block";
  } 
  
  return noticeElement.style.display = "none";
}
</script>

【讨论】：