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

Form Validation - How to use If and Else If

本文关键字：If Else 何使用 验证 表单      更新时间：2023-09-26

我试图做一个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;
    }
}

一种更优雅的方法是，你可以在你想要检查的每个输入上指定一个'required'类，然后使用jQuery执行以下操作:

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

我利用&运算符在其他语言中使用布尔逻辑做到了这一点。如果任何一个值是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;
}

这样做应该会有所帮助(假设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
    }
}

基于@Baszz使用jQuery的第二个答案，您还可以使用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>

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

相关文章：