使用 JavaScript 檢查用戶輸入

Question

我正在通過我的網絡客戶端向我的服務器提交一個帶有輸入文本的表單。 我想要做的是檢查用戶是否在通過點擊提交按鈕發送表單之前將文本傳遞到輸入字段中。

到目前為止我嘗試過的：

 var form = document.getElementById("id"); document.getElementById("id").addEventListener("click", function() { var input = document.getElementById("content").value; if (input == "") { alert("write something in the textfield"); } else { form.submit(); } });

 <form action="" method="post" id="id"> <input type="text" name="name" id="content"> <button type="submit" id="submit-id">submit text</button> </form>

關於如何做到這一點的任何好提示？

Answer 1

您希望在提交事件上防止默認

 document.getElementById("id").addEventListener("submit", function(e) { const input = document.getElementById("content").value; if (input.trim() === "") { alert("write something in the textfield"); e.preventDefault() } });

 <form action="" method="post" id="id"> <input type="text" name="name" id="content"> <button type="submit" id="submit-id">submit text</button> </form>

或者，只需添加 required 屬性 - 不需要腳本：

 <form action="" method="post" id="id"> <input type="text" name="name" id="content" required> <button type="submit" id="submit-id">submit text</button> </form>

Answer 2

我正在通過我的網絡客戶端向我的服務器提交一個帶有輸入文本的表單。 我想要做的是檢查用戶是否在通過點擊提交按鈕發送表單之前將文本傳遞到輸入字段中。

到目前為止我嘗試過的：

 var form = document.getElementById("id"); document.getElementById("id").addEventListener("click", function() { var input = document.getElementById("content").value; if (input == "") { alert("write something in the textfield"); } else { form.submit(); } });

 <form action="" method="post" id="id"> <input type="text" name="name" id="content"> <button type="submit" id="submit-id">submit text</button> </form>

關於如何做到這一點的任何好提示？

Answer 3

您可以改用簡單的代碼片段：

 <form action="" method="post" id="id"> <input type="text" name="name" id="content" required> <button type="submit" id="submit-id">submit text</button> </form>

Answer 4

 function submitIt(e) { var formData = new FormData(e); var object = {}; formData.forEach(function(value, key) { object[key] = value; }); if (object.name == "") { alert("null"); } else { alert("ok"); return true; } return false; }

 <form onsubmit="return submitIt(this)"> <input type="text" name="name"> <button>submit text</button> </form>