Question

我对处理程序中的空输入字段实施了验证：

if(inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === ""){
    alert ("fill all fields");}

在处理程序中：buttDelete.addEventListener的处理方式相同，但是由于某种原因，检查表单的空性不起作用。帮助修复

const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    if (inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === "") {
        alert("fill all fields");
    } else {
        e.preventDefault();
        shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value),
            parseInt(inputsAdd[1].value)));
        shop.show();
        inputsAdd[0].value = "";
        inputsAdd[1].value = "";
        inputsAdd[2].value = "";
    }
}, false);
// delete product by name after click
const formDelete = document.forms[1];
const nameDelete = formDelete.elements[0];
const buttDelete = formDelete.elements[1];
buttDelete.addEventListener('click', (e) => {
    if (nameDelete === "") {
        alert("write a name of product what you want to delete");
    } else {
        e.preventDefault();
        shop.deleteProductByName(nameDelete.value);
        shop.show();
        nameDelete.value = "";
    }

}, false);
let shop = new Shop();

        <form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add">Add</button>
        </form>    
<form id="delete-form">
        <label for="name-delete">Delete product by name</label>
        <input type="text" id="name-delete" class="input-delete">
        <button id="delete" type="button">Delete</button>
    </form>

Answer 1

inputsAdd[0], inputsAdd[1] ,inputsAdd[2]是对象。在这些对象上使用.value，您可以获得比较的值

更改此

if (inputsAdd[0] === "" || inputsAdd[1] === "" || inputsAdd[2] === ""){
            alert("fill all fields");
        }

至

if (inputsAdd[0].value === "" || inputsAdd[1].value === "" || inputsAdd[2].value === "") {
        alert("fill all fields");
    }

还需要将nameDelete更改为nameDelete.value

const formAdd = document.forms[0];
const inputsAdd = formAdd.elements;
const buttAdd = formAdd.elements[3];
buttAdd.addEventListener('click', (e) => {
    if (inputsAdd[0].value === "" || inputsAdd[1].value === "" || inputsAdd[2].value === "") {
        alert("fill all fields");
    } else {
        e.preventDefault();
        shop.addProduct(new Product(inputsAdd[0].value, parseInt(inputsAdd[2].value),
            parseInt(inputsAdd[1].value)));
        shop.show();
        inputsAdd[0].value = "";
        inputsAdd[1].value = "";
        inputsAdd[2].value = "";
    }
}, false);
// delete product by name after click
const formDelete = document.forms[1];
const nameDelete = formDelete.elements[0];
const buttDelete = formDelete.elements[1];
buttDelete.addEventListener('click', (e) => {
    if (nameDelete.value === "") {
        alert("write a name of product what you want to delete");
    } else {
        e.preventDefault();
        shop.deleteProductByName(nameDelete.value);
        shop.show();
        nameDelete.value = "";
    }

}, false);

<form id="addForm">
            <label for="name" >Name of product</label>
            <input type="text"  id="name" class="input-product">
            <label for="price">Price of product</label>
            <input type="text"  id="price" class="input-product">
            <label for="count">Count of product</label>
            <input type="text"  id="count" class="input-product">
            <button id="add">Add</button>
        </form>    
<form id="delete-form">
        <label for="name-delete">Delete product by name</label>
        <input type="text" id="name-delete" class="input-delete">
        <button id="delete" type="button">Delete</button>
    </form>

Answer 2

您的变量是元素本身的变量，而不是值的变量，只需将.value添加为空字符串即可，就可以按照自己的方式添加nameDelete。

对const formAdd = document.forms[0]; const inputsAdd = formAdd.elements; const buttAdd = formAdd.elements[3]; buttAdd.addEventListener('click', (e) => { if (inputsAdd[0].value === "" || inputsAdd[1].value === "" || inputsAdd[2].value === "") { alert("fill all fields"); } else { e.preventDefault(); inputsAdd[0].value = ""; inputsAdd[1].value = ""; inputsAdd[2].value = ""; } }, false); // delete product by name after click const formDelete = document.forms[1]; const nameDelete = formDelete.elements[0]; const buttDelete = formDelete.elements[1]; buttDelete.addEventListener('click', (e) => { if (nameDelete.value === "") { alert("write a name of product what you want to delete"); } else { e.preventDefault(); nameDelete.value = ""; } }, false);进行检查

<form id="addForm">
  <label for="name">Name of product</label>
  <input type="text" id="name" class="input-product">
  <label for="price">Price of product</label>
  <input type="text" id="price" class="input-product">
  <label for="count">Count of product</label>
  <input type="text" id="count" class="input-product">
  <button id="add">Add</button>
</form>
<form id="delete-form">
  <label for="name-delete">Delete product by name</label>
  <input type="text" id="name-delete" class="input-delete">
  <button id="delete" type="button">Delete</button>
</form>

Shop

我已删除autopostback="True"，因此代码在此处运行

Answer 3

这可能有助于将表单的初始值设置为HTML中的空字符串。

undefined

我总是非常警惕确保初始值可预测。例如，如果浏览器或框架认为初始值为@Before(value="execution(* *(@CustomAnnotation (*), ..)) && args(input, ..)") public void inspect(JoinPoint jp, Object input) { LOGGER.info(">>> inspecting "+input+" on "+jp.getTarget()+", "+jp.getSignature()); }，怎么办？

为什么条件触发时没有警报？

3 个答案: