Javascript 表单验证-如何使用If和Else If

我正在尝试进行Javascript表单验证，在几种情况下，我希望将formValue设置为0。也就是说，如果未填写任何必填字段，则该值应变为0

function formValidation() {
            var formValue = 1;

            if (document.getElementById('orgname').value == '') formValue = 0;
            else if (document.getElementById('culture[]').value == '') formValue = 0;
            else if (document.getElementById('category[]').value == '') formValue = 0;
            else if (document.getElementById('service[]').value == '') formValue = 0;

            if (formOkay == 1) {
           return true;
      } else if (formOkay == 0) {
           alert('Please fill out all required fields');
           return false;
      }
 }

有没有更优雅的方法

---

编辑：脚本现在似乎不工作。

您可以执行一些循环操作：

var toCheck = ['orgname', 'culture[]', 'category[]', 'category[]']
for(var id in toCheck )
{
    if(document.getElementById(id).value == ''){
        formValue = 0;
        break;
    }
}

更优雅的方法是，在要检查的每个输入上指定一个“必需”类，然后使用：

---

类似的内容应该会有所帮助（这假设

value

属性在引用的元素上可用）：

var id=[“组织名称”、“区域性[]”、“类别[]”、“服务[]”]，
formValue=1；//默认为验证通过
对于（变量i=0，len=ids.length；i

我已经在其他语言中使用布尔逻辑完成了这项工作，利用了

&

运算符。如果任何值为

false

，它总是返回

false

比如：

function formValidation() {
  var formValue = true;

  formValue &= document.getElementById('orgname').value != '';
  formValue &= document.getElementById('culture[]').value != '';
  formValue &= document.getElementById('category[]').value != '';
  formValue &= document.getElementById('service[]').value != '';

  if(!formValue) {
    alert('Please fill out all required fields');
  }

  return formValue;
}

这样做的好处是可以在逻辑更复杂的其他场景中使用。任何最终计算为

true

/

false

的结果都将适合此解决方案

然后我将致力于减少逻辑重复：

function formValidation() {
  var formValue = true;

  var elementIdsToCheck = ['orgname', 'culture[]', 'category[]', 'category[]'];
  for(var elementId in elementIdsToCheck) {
    formValue &= document.getElementById(elementId).value != '';
  }

  if(!formValue) {
    alert('Please fill out all required fields');
  }

  return formValue;
}

---

在@Baszz使用jQuery的第二个答案的基础上，您还可以使用HTML5

data-

attributes构建一个更通用的解决方案：

$(function() {
  $('form').submit(function() {
    var toValidate = $(this).find('input[data-validation]');
    for(var i=0; i<toValidate.length; i++) {
      var field = $(toValidate[i]);
      if(field.val().search(new RegExp(field.data('validation'))) < 0) {
        alert("Please fill out all required fields!");
        return false;
      }
    }
  });
});

$（函数（）{
$（'form'）。提交（函数（）{
var toValidate=$（this.find（'input[data validation]'）；
对于（var i=0；ior使用HTML5
required
属性：）@Tom:这当然是正确的，但并非所有浏览器都支持它。“实体名称必须紧跟在实体引用中的（&i）后面”-这是什么意思？-这是我的IDE netbeans写的。@AndrewAlexander:嗯，也许JS不支持
&=
操作符，但只支持
&
操作符。我会编辑我的答案来解决这个问题。@AndrewAlexander:我想这个错误可能是您将代码放入HTML文件的方式。您可能需要转义
&
作为实体引用：
&；
。正在回滚我的更改，因为使用
&=
，代码更干净，如果有效…&；=似乎不起作用。&；似乎在适当的位置工作得很好。实际上，使用了&；，并且它说“未定义”你可以将正则表达式添加到HTML标记中？！这是惊人的！我不知道！@andrew alexander你可以将任何字符串添加到HTML5
data-
属性中，这些属性当然可以包含正则表达式。在Chrome 15.x中快速测试后更正了代码片段
function formValidation() {
  var formValue = true;

  var elementIdsToCheck = ['orgname', 'culture[]', 'category[]', 'category[]'];
  for(var elementId in elementIdsToCheck) {
    formValue &= document.getElementById(elementId).value != '';
  }

  if(!formValue) {
    alert('Please fill out all required fields');
  }

  return formValue;
}

$(function() {
  $('form').submit(function() {
    var toValidate = $(this).find('input[data-validation]');
    for(var i=0; i<toValidate.length; i++) {
      var field = $(toValidate[i]);
      if(field.val().search(new RegExp(field.data('validation'))) < 0) {
        alert("Please fill out all required fields!");
        return false;
      }
    }
  });
});

<form>
  <input type="text" data-validation=".+" />
</form>