仅在功能1和2完成后调用功能3

Question

如何确保函数createOverzicht仅在函数后执行 checkNotEmpty和checkNumber已经完成，现在如果我点击它调用的按钮函数createOverzicht，但那不应该发生，createOverzicht只应该在前两个函数之后调用或完成。 在这种情况下，我有一个表单，前两个函数是验证输入，这就是为什么我不希望createOverzicht o excecute没有任何填充

所以为了简化概念，这就是我的意思：

function createOverzicht() {
  if (checkNotEmpty && checkNumber) {
    alert('hi');
  };
  else {
    //do nothing
  };
}


function checkNotEmpty(field, span) {
  if (field.value.length > 1 && isNaN(field.value)) {
    document.getElementById(span).className = 'goed';
    document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
  } else {
    document.getElementById(span).className = 'nietgoed';
    document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
  };
};

function checkNumber(field, span) {
  if (field.value.length == 10 && !isNaN(field.value)) {
    document.getElementById(span).className = 'goed';
    document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
  } else {
    document.getElementById(span).className = 'nietgoed';
    document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
  };
};


function createOverzicht() {
  alert('hi');
}

window.onload = function() {
  document.getElementById('naam').oninput = function() {
    checkNotEmpty(this, 'meldingNaam');
  };
  document.getElementById('achternaam').oninput = function() {
    checkNotEmpty(this, 'meldingAchternaam');
  };
  document.getElementById('telefoonnummer').oninput = function() {
    checkNumber(this, 'meldingTel');
  };

  document.getElementById('overzicht').onclick = function() {
    createOverzicht()
  };
};

Answer 1

据我所知，您有两种选择：

1）存储每个输入的状态（有效或无效）

这可能很难维持!!

2）在“createOverzicht”内部调用一个检查一切是否正常的函数

这个替代方案意味着对验证的函数进行一些更改，如果字段有效或相反，则需要返回true;还在“createOverzicht”的开头添加一些代码。 实现将如下所示：

function createOverzicht() {       
    checkNotEmpty(document.getElementById('naam'), 'meldingNaam');    
    checkNotEmpty(document.getElementById('achternaam'),'meldingAchternaam');
    checkNumber(document.getElementById('telefoonnummer'), 'meldingTel');    
    alert('hi');
}
function checkNotEmpty(field, span) {
    if (field.value.length > 1 && isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

function checkNumber(field, span) {
    if (field.value.length == 10 && !isNaN(field.value)) {
        document.getElementById(span).className = 'goed';
        document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
        return true;
    } else {
        document.getElementById(span).className = 'nietgoed';
        document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
        return false;
    };
};

可以使用像jQuery这样的javascript库，jQuery Validator插件将帮助你获得战利品。

Answer 2

您需要将调用移动到createOverzicht（），如下所示：

function myFunction() {
  if (checkNotEmpty && checkNumber) {
    createOverzicht();
  };
  else {
    //do nothing
  };
}

checkNotEmpty和checkNumber函数也需要返回一个布尔值。