Question

我希望在提交时获得表单的答案并将其解析为JSON。这非常好，但我想在发送数据之前进行一些验证。我在下面试了很多片段，但仍然卡住了。

步骤：

防止“发送”的默认事件
获取表格
遍历表格的元素
消除空白物品及其价值
如果选中复选框：value = true
在数据中存储正确的项目
返回数据

不知怎的，我无法上班第4步和第5步同时工作，每当我让其中一个工作时，我就会搞砸另一个。

在此代码段中，该复选框的工作方式有意，但文本字段不是：

如果有人可以通过if / else语句或类似的方式向我指出正确的方向，那将非常感激。

<div class="container">
  <img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

document.addEventListener('DOMContentLoaded', function(){
var data = {};

var formToJSON = function formToJSON(form) {
	var data = {};
    for (var i = 0; i < form.length; i++) {
      var item = form[i];


         //looking for checkbox

            if (item.value =="") {
                continue;
            }
            else {
                if (item.checked == false) {
                    data[item.name] = false;
                }
                else {
                data[item.name] = item.value;
                }
            }
    }
return data; };

  var dataContainer = document.getElementsByClassName('results__display')[0];
  form = document.getElementById('formular').querySelectorAll('input,select,textarea');
  butt = document.getElementById('knopfabsenden');
  butt.addEventListener('click', function (event) {
    event.preventDefault();
      handleFormSubmit(form = form);
  });

  var handleFormSubmit = function handleFormSubmit(event) {
    var data = formToJSON(form);
    dataContainer.textContent = JSON.stringify(data, null, "  ");
    }

}, false);

Answer 1

问题是.checked如果不存在则始终为false。因此，文本字段的值为false。

for (var i = 0; i < form.length; i++) {
  var item = form[i];


     //looking for checkbox

        if (item.value ==="") {
            continue;
        }
        else {
            if (item.type === "text") {
                data[item.name] = item.value;
            }
            else if (item.type === "checkbox"){
                data[item.name] = item.checked;
            }
        }
}

在此代码段中，我检查输入的类型并相应地处理它。另请注意，我使用===运算符而不是==运算符作为最佳实践（Difference between == and === in JavaScript）

使用标准验证不同类型的表单输入

1 个答案: