使用 JavaScript 进行表单输入验证

Question

我正在制作一个将信息上传到 sessionStorage 的应用程序。一切看起来都很棒，但出于某种原因，我的文件上传验证似乎不起作用。

它显示警报，但仍然允许我上传尽可能多（或尽可能少）的项目。不要求上传任何图片，但如果用户愿意，he/she 应该只允许上传超过 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").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').value,
    }
    pizzas.push(pizza);
    document.querySelector('form').reset();
    //pasichekint consoleje
    console.warn('added', {
      pizzas
    });
    sessionStorage.setItem('MyPizzaList', JSON.stringify(pizzas));
  }
}

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('btn').addEventListener('click', addPizza);
});

html 添加 post 编辑

<html>
<form>

            
            <input type="text" id="name" name="name" placeholder="name of the pizza:*" 
                required size="20" maxlength="30"> <br> <!--unique has to to be made in 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> <!--done-->

        
            <input type="number" id="heat" name="heat" 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="topping 5"
                size="20" maxlength="30"><br> <!-- kinda done, needs to figure out id/name/ while doing JS-->


            <label for="images"><strong>Upload photos:</strong></label>
            <input type="file" id="images" name="images" accept=".jpg, .jpeg, .png" multiple> <br> <!--done-->
        
            <button id="btn" >Add Pizza</button>   <p>required fields indicated by *</p>


        </form>

</html>

Answer 1

如果验证失败，您需要通过将 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;
}

使用 JavaScript 进行表单输入验证

Form input validation with JavaScript

javascript

forms

validation

session-storage