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

【问题标题】：Validating different types of form inputs with criterias使用标准验证不同类型的表单输入
【发布时间】：2018-05-01 12:58:12
【问题描述】：

我想在提交时获得表单的答案并将其解析为 JSON。这工作得很好，但我想在发送数据之前进行一些验证。我在下面尝试了很多 sn-p 的变体，但仍然卡住了。

步骤：

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

不知何故，我无法同时进行第 4 步和第 5 步工作，每次我让其中一个工作时，我都会搞砸另一个。

在这个 sn-p 中，复选框按预期工作，但文本字段没有：

如果有人能用 if/else 语句或类似的语句为我指明正确的方向，将不胜感激。

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);

<div id="formular">
<label class="formular__label" for="machineName">Textfield Test</label>
<input class="formular__input formular__input--text" id="machineNumber" name="machineNumber" type="text"/>

<br>
<input class="formular__input formular__input--checkbox" id="checkTest" name="checkTest" type="checkbox" value="true"/>
<label class="formular__label formular__label--checkbox" for="checkTest">Checkbox Test</label>
<br>
<button class="formular__button" id="knopfabsenden" type="submit">Submit</button>
</div>

<div class="results">
  <h2 class="results__heading">Form Data</h2>
  <pre class="results__display-wrapper"><code class="results__display"></code></pre>
</div>

【问题讨论】：

标签： javascript html arrays forms user-input

【解决方案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;
            }
        }
}

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

【讨论】：