Question

我正在尝试进行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;
      }
 }

有更优雅的方法吗？

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

Answer 1

你可以做一些循环：

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

更优雅的方法是，您可以在要检查的每个输入上指定“必需”类，而不是使用jQuery执行以下操作：

$(document).ready(function(){
    var toCheck = $('.required');
    var formValue = 1;
    $.each(toCheck, function(index, element){
        if(element.val() == '')
           formValue = 0;
    });
});

Answer 2

我已经使用布尔逻辑在其他语言中完成了这项工作，利用了&运算符。如果任何值为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;
}

Answer 3

这样的事情应该会有所帮助（这假设value属性在引用的元素上可用）：

var ids = ["orgname", "culture[]", "category[]", "service[]"],
    formValue = 1; // default to validation passing

for (var i = 0, len = ids.length; i < len; i++) {
    if (document.getElementById(ids[i]).value === "") {
       formValue = 0;
       break; // At least one value is not specified so we don't need to continue loop
    }
}

Answer 4

使用jQuery构建@Baszz的第二个答案，您还可以使用HTML5 data-属性构建更通用的解决方案：

$(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>

对于必填字段，您可以使用＆＃34;。+＆＃34;作为正则表达式，意味着用户必须输入至少一个字符，但您当然可以使用正则表达式的全部潜力来检查有效的电子邮件地址，电话号码或邮政编码等...

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

4 个答案: