Question

我从一些随机网站抓取了表单，因为我现在只对编写javascript感兴趣。

我正在尝试检查用户是否为所有字段选择或输入了文本。如果if-else，我已经做了很长时间，但这不是最好/最优雅/最简单的解决方案。

暂时不考虑单选按钮验证，检查文本字段，下拉列表和复选框都有值/输入的更好方法是什么？

我正在自学javascript所以我愿意被告知正确的方式，我会研究它并自己做，或者更新我的小提琴也没关系。（对我很温柔。我确定这段代码很简陋。）

对此的任何想法都将不胜感激。

小提琴：https://jsfiddle.net/kiddigit/g0rur21a/

document.getElementById("newForm").addEventListener("submit", enterForm);

function enterForm(event) {
    event.preventDefault();

    var dropdown = document.getElementById('dropDown');

    if (document.getElementById('fname').value === ''){ 
            document.getElementById('fname').focus(); 
            alert('Enter text.');
        } else if (document.getElementById('eMail').value === ''){
            document.getElementById('eMail').focus();
            alert('Enter text.');
            } else if  (document.getElementById('textArea').value === '') {
                document.getElementById('textArea').focus();
                alert('Enter text.');
                } else if (!dropDown.value) {
                    document.getElementById('dropDown').focus();
                    alert('Choose an option.');
                    } else if ( ( newForm.checkbox[0].checked == false ) && ( newForm.checkbox[1].checked == false ) ) 
                        { alert ( "Please choose a checkbox" ); 
                            return false;
                            }

    var radios = document.getElementsByName("radio");
    var formValid = false;
    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
            i++;        
        }

        if (!formValid) alert("Please check a radio button.");
        return formValid;

        return false;
};

Answer 1

如果你使用HTML5，并假设你没有使用jQuery（只是本机JavaScript），一个好的约定就是为你要验证的表单中的所有输入元素分配一个类（或者如果它们都是需要验证，您可以获取表单的所有子元素），并使用getElementsByClassName（）。使用HTML5 data- *属性，您可以指定data-invalid-error-message之类的内容来设置元素本身的错误消息。

http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

从那里，您可以跨所有元素执行循环，检查它们是否为空，然后获取data-invalid-error-message属性并将其显示给用户，而不执行嵌套的if语句。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Answer 2

document.getElementById("newForm").addEventListener("submit", function (event) {
  event.preventDefault();

  if (!document.getElementById('fname').value) {
    return alert('Enter text.');
  }

  if (document.getElementById('eMail').value === '') {
    document.getElementById('eMail').focus();
    return alert('Enter text.');
  }

  if (document.getElementById('textArea').value === '') {
    document.getElementById('textArea').focus();
    return alert('Enter text.');
  }

  var dropdown = document.getElementById('dropDown');
  if (!dropdown || !dropDown.value) {
    document.getElementById('dropDown').focus();
    return alert('Choose an option.');
  }

  if (( newForm.checkbox[0].checked == false ) && ( newForm.checkbox[1].checked == false )) {
    return alert("Please choose a checkbox");
  }

  var radios = document.getElementsByName("radio");
  var formValid = false;
  var i = 0;
  while (!formValid && i < radios.length) {
    if (radios[i].checked) {
      formValid = true;
    }
    i++;
  }

  if (!formValid) {
    return alert("Please check a radio button.");
  }

  // Form is valid here
});

以下是一些改进。 Updated Fiddle

我想使用required属性验证表单，但它不支持选项组和广播组的验证

Answer 3

如果你没有支持IE8，你可以使用querySelectorAll动态获取表单中不同类型的所有节点并相应地验证它们。这适用于包含任意数量输入的表单：

function validateForm(formNode) {
    var formValid = true;
    var textFlds = formNode.querySelectorAll('input[type="text"],input[type="email"],input[type="password"],textarea');
    var dropdowns = formNode.querySelectorAll('select');
    var checks = formNode.querySelectorAll('input[type="checkbox"]');
    var anyChecked = false;
    var radios = formNode.querySelectorAll('input[type="radio"]');
    var anyRadios = false;
    for (var i = 0, l = textFlds.length; i < l; i++) {
        if (!textFlds[i].value) {
            textFlds[i].focus();
            alert('Please enter text into the ' + textFlds[i].name + ' field.');
            formValid = false
            break;
        }
    };

    for (var i = 0, l = dropdowns.length; i < l; i++) {
        if (formValid && !dropdowns[i].value) {
            dropdowns[i].focus();
            alert('Please choose an option from the ' + dropdowns[i].name + ' selector.');
            formValid = false
            break;
        }
    };

    for (var i = 0, l = checks.length; i < l; i++) {
        if (checks[i].checked) {
            anyChecked = true;
            break;
        }
    };
    if (formValid && !anyChecked) {
        alert('Please choose at least one of the checkboxes.');
        formValid = false;
    }

    for (var i = 0, l = radios.length; i < l; i++) {
        if (radios[i].checked) {
            anyRadios = true;
            break;
        }
    };
    if (formValid && !anyRadios) {
        alert('Please check a radio button.');
        formValid = false;
    }

    return formValid;
}

document.getElementById('newForm').addEventListener('submit', function (evt) {
        evt.preventDefault();

        validateForm(this);
    });

这可能会有点漂亮，但你明白了。（fiddle here）

我该如何改进我的javascript表单验证？

3 个答案: