我遇到了我不明白的事情。我從表單中收集所有資料并放入物件，但我不明白為什么在該物件中一個鍵是空字串而值也是空字串？請解釋一下，如果可以的話，我的錯誤在哪里以及為什么會這樣。如果用戶不填寫任何人輸入并推送提交，以及結果應該是警報（“空表單”）如何更好和更短的方式進行驗證
<form id="form">
<div >
<label >Email address</label>
<input name="email" type="email" >
</div>
<div >
<label >First name</label>
<input name="firstName" type="text" >
</div>
<div >
<label >Last name</label>
<input name="lastName" type="text" >
</div>
<div >
<label >Nickname</label>
<input name="nickname" type="text" >
</div>
<div >
<label >Password</label>
<input name="password" type="password" >
</div>
<div >
<label >Select an option</label>
<select name="option" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div >
<label >Type in your message</label>
<textarea
placeholder="Leave a comment here"
style="height: 100px"
name="message"
></textarea>
</div>
<div >
<label >Default file input example</label>
<input name="file" type="file">
</div>
<div >
<input name="terms" type="checkbox" >
<label >Согласен с условиями</label>
</div>
<button type="submit" >Submit</button>
</form>
const myForm = document.getElementById("form");
myForm.addEventListener("submit", element => {
element.preventDefault();
const keyValues = {};
for(let key of myForm) {
keyValues[key.name] = key.value;
}
localStorage.setItem("Item", JSON.stringify(keyValues));
window.location = 'result-submit.html';
})
uj5u.com熱心網友回復：
嘗試輸入以下代碼，看看你會在控制臺中找到什么：
myForm.addEventListener("submit", (element) => {
element.preventDefault();
const keyValues = {};
console.log(myForm);
for (let key of myForm) {
console.log(key, key.name, key.value);
keyValues[key.name] = key.value;
}
localStorage.setItem("Item", JSON.stringify(keyValues));
// window.location = "result-submit.html";
});
您會注意到導致此問題的是按鈕，要繞過它，請嘗試添加以下條件：
if (key.type !== "submit") {...}
所以你的回圈看起來像這樣
for (let key of myForm) {
if (key.type !== "submit") {
keyValues[key.name] = key.value;
}
}
至于檢查輸入，客戶端最好的方法是使用html內置的輸入屬性：https ://www.w3schools.com/html/html_form_attributes.asp
uj5u.com熱心網友回復：
提交按鈕是表單的一部分，并與表單資料一起發送。為按鈕命名，使其不會顯示為空鍵
uj5u.com熱心網友回復：
將required和name屬性添加到您所需的輸入中，并讓瀏覽器進行初始驗證。如果你想做進一步的有效性，你可以使用 JS，也許通過使用FormData介面。
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
function handleSubmit(e) {
e.preventDefault();
const FD = new FormData(form);
for (const input of FD) {
console.log(input);
}
}<form id="form">
<div>
<label>Email address</label>
<input name="email" type="email" required>
</div>
<div>
<label>First name</label>
<input name="firstName" type="text" required>
</div>
<div>
<label>Password</label>
<input name="password" type="password" required>
</div>
<div>
<label>Select an option</label>
<select name="option" required>
<option selected disabled value="">Select option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
<div>
<label>Type in your message</label>
<textarea name="comment" required placeholder="Leave a comment here"></textarea>
</div>
<div>
<label>Согласен с условиями</label>
<input name="terms" type="checkbox" required>
</div>
<button type="submit">Submit</button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510228.html