如何驗證文本區域？ 它可能不是空的

Question

我需要向我的 textarea 添加驗證。 例如，它不得少於 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>

我被困住了。 我讓它可以使用 regEx 作為驗證和 YT 指南。 但我想我將這種驗證轉化為一種的知識超出了我的范圍（現在......）

Answer 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>

Answer 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>