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

我从某个随机站点抓取了表单，因为我现在只对编写javascript感兴趣

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

撇开单选按钮验证不谈，检查文本字段、下拉列表和复选框是否都有值/输入的更好方法是什么

我在自学javascript，所以我愿意被告知正确的方法，我会研究它并自己做，或者更新我的小提琴也可以。（对我温柔一点。我肯定这是janky的密码。）

如果您对此有任何想法，我们将不胜感激

小提琴：

document.getElementById（“newForm”）.addEventListener（“submit”，enterForm）；
函数形式（事件）{
event.preventDefault（）；
var dropdown=document.getElementById（'dropdown'）；
如果（document.getElementById（'fname'）。值=“”）{
document.getElementById（'fname'）.focus（）；
警报（“输入文本”）；
}else if（document.getElementById（'eMail'）。值=“”）{
document.getElementById（'eMail'）.focus（）；
警报（“输入文本”）；
}else if（document.getElementById（'textArea'）。值=“”）{
document.getElementById（'textArea'）.focus（）；
警报（“输入文本”）；
}else如果（！dropDown.value）{
document.getElementById（'dropDown'）.focus（）；
警报（“选择选项”）；
}else if（（newForm.checkbox[0]。checked==false）和&（newForm.checkbox[1]。checked==false））
{提醒（“请选择一个复选框”）；
返回false；
}
var radios=document.getElementsByName（“radio”）；
var formValid=false；
var i=0；
而（！formValid&&i

如果您使用HTML5，并且假设您没有使用jQuery进行任何操作（仅使用本机JavaScript），一个好的约定是将类分配给要验证的表单中的所有输入元素（或者如果它们都需要验证，您可以获取表单的所有子元素），然后使用GetElementsByCassName（）。使用HTML5 data-*属性，您可以指定类似data invalid error message的内容来设置元素本身的错误消息

从那里，您可以在所有元素之间执行循环，检查它们是否为空，然后获取数据无效错误消息属性并将其显示给用户，而无需执行嵌套的if语句

---

如果您使用HTML5，并且假设您没有使用jQuery进行任何操作（仅使用本机JavaScript），一个好的约定是将类分配给表单中所有要验证的输入元素（或者如果它们都需要验证，您可以获取表单的所有子元素），然后使用GetElementsByCassName（）。使用HTML5 data-*属性，您可以指定类似data invalid error message的内容来设置元素本身的错误消息

从那里，您可以在所有元素之间执行循环，检查它们是否为空，然后获取数据无效错误消息属性并将其显示给用户，而无需执行嵌套的if语句

document.getElementById（“newForm”）.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
if（！document.getElementById（'fname'）.value）{
返回警报（“输入文本”）；
}
if（document.getElementById（'eMail'）。值=“”）{
document.getElementById（'eMail'）.focus（）；
返回警报（“输入文本”）；
}
if（document.getElementById（'textArea'）。值=“”）{
document.getElementById（'textArea'）.focus（）；
返回警报（“输入文本”）；
}
var dropdown=document.getElementById（'dropdown'）；
如果（！dropdown | |！dropdown.value）{
document.getElementById（'dropDown'）.focus（）；
返回警报（“选择选项”）；
}
if（（newForm.checkbox[0]。checked==false）和&（newForm.checkbox[1]。checked==false））{
返回警报（“请选择一个复选框”）；
}
var radios=document.getElementsByName（“radio”）；
var formValid=false；
var i=0；
而（！formValid&&i

这里有一些改进

我想使用

required

属性验证表单，但它不支持验证选项组和无线组

文档。getElementById（“新表单”）。addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
if（！document.getElementById（'fname'）.value）{
返回警报（“输入文本”）；
}
if（document.getElementById（'eMail'）。值=“”）{
document.getElementById（'eMail'）.focus（）；
返回警报（“输入文本”）；
}
if（document.getElementById（'textArea'）。值=“”）{
document.getElementById（'textArea'）.focus（）；
返回警报（“输入文本”）；
}
var dropdown=document.getElementById（'dropdown'）；
如果（！dropdown | |！dropdown.value）{
document.getElementById（'dropDown'）.focus（）；
返回警报（“选择选项”）；
}
if（（newForm.checkbox[0]。checked==false）和&（newForm.checkbox[1]。checked==false））{
返回警报（“请选择一个复选框”）；
}
var radios=document.getElementsByName（“radio”）；
var formValid=false；
var i=0；
而（！formValid&&i

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

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

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