我正在制作一個應用程式，將資訊上傳到sessionStorage。所有這些看起來都很好，但是由于某些原因，我的檔案上傳驗證似乎并不奏效。
它顯示了警告，但仍然允許我上傳盡可能多（或盡可能少）的專案。 它不需要上傳任何圖片，但如果用戶想要，他/她應該只被允許上傳超過3個或少于10個檔案。
你也可以看到保存用戶輸入的代碼，它作業得很好，但也許在某種程度上它會擾亂驗證代碼。
const input = document. querySelector（'#images'）。
input.addEventListener('change', (e) => {
const files = input.files;
if (files.length < 3 || files.length > 10) {
alert(`Only more than 3 and less than 10 files are allowed to upload`)。
return;
}
};
- 輸入保存代碼，作業正常（就我所知）
let pizzas = []。
const addPizza=（ev）=> {
ev.preventDefault（）。
if (document.getElementById("name").value. length == 0 || document.getElementById("heat") 。 value.length == 0 || document. getElementById("price").value.length ==0|.
document.getElementById("toppings1"/span>)。 value.length ==0 || document. getElementById("toppings2").value.length ==0) {
alert("Please fill the required fields")
} else {
let pizza = {
pizzaName: document.getElementById('name').value。
pizzaPrice。document.getElementById('heat').value。
pizzatoppings1: document.getElementById('toppings1').value。
pizzatoppings2: document.getElementById('toppings2').value。
pizzatoppings3: document.getElementById('toppings3').value。
pizzatoppings4: document.getElementById('toppings4').value。
pizzatoppings5: document.getElementById('toppings5').value。
pizzaImages。document.getElementById('images'/span>).value。
}
pizzas.push（pizza）。
document.querySelector（'form'）.reset（）。
/pasichekint consoleje。
console.warn('added', {
披薩
});
sessionStorage.setItem('MyPizzaList', JSON.stringify(pizzas) )。
}
}
document.addEventListener('DOMContentLoaded', （）=> {
document.getElementById('btn'/span>)。 addEventListener('click', addPizza) 。
});
html添加帖子編輯
<html>
<form>
<input type="text" id="name" name="name" placeholder="pizza的名字：*"
required size="20" maxlength="30"> <br> <--unique必須在JS中制作-->
<input type="number" id="price" name="price" placeholder="price:*"
required size="20" min="0" max="999" step="0.01" oninput="validity.valid||(value='');"><br> <!--完成-->。
<input type="number" id="heat" name="hot" placeholder="hotness:"
size="20" min="1" max="3" step="1" oninput="validity.valid||(value='');"><br> <!--done->
<label for="toppings"><strong>Add Toppings:</strong></label><br>
<input type="text" id="toppings1" name="topping1" placeholder="topping 1*"
required size="20" maxlength="30"><br>
<input type="text" id="toppings2" name="topping2" placeholder="topping 2*" 。
required size="20" maxlength="30"><br>
<input type="text" id="toppings3" name="topping3" placeholder="topping 3" 。
size="20" maxlength="30"><br>
<input type="text" id="toppings4" name="topping4" placeholder="topping 4".
size="20" maxlength="30"><br>
<input type="text" id="toppings5" name="topping5" placeholder="topping5"
<label for="images"><strong>上傳照片：</strong></label>。
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png" multiple> <br> <！--done->
<button id="btn" >添加披薩</button> <p>用*表示的必填項</p>。
</form>
</html>
uj5u.com熱心網友回復：
如果驗證失敗，你需要通過給輸入值賦值為null來重置輸入。
if（files. length < 3 || files.length > 10) {
alert(`Only more than 3 and less than 10 files are allowed to upload`)。
input.value = null;
return。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/309059.html
標籤：