Question

我对以下代码的作用域有一个概念性的问题。

该代码是用于两种形式的简单客户端验证脚本。

我使用自调用函数来避免设置所有全局变量，从而尝试了一种不同的方法，但是它的行为对我来说似乎有点奇怪。

我仍在学习使用JavaScript进行编码，但我不是专家，但是这些高级功能有些复杂。

我不想使用jQuery，而只想使用纯JavaScript来学习基础。

<!-- Forms handling -->

<script src="validate_functions.js"></script>

<script>

(function main() {

  var frmPrev = document.getElementById('frmPrev');
  var frmCont = document.getElementById('frmCont');

  var btnPrev = frmPrev['btnPrev'];
  var btnCont = frmCont['btnCont'];

  var caller = '';

  var forename = '';
  var surname = '';
  var phone = '';
  var email = '';
  var privacy = '';
  var message = '';

  var infoBox = document.getElementById('info-box');
  var infoBoxClose = infoBox.getElementsByTagName('div')['btnClose'];

  btnPrev.onclick = function(e) {

    submit(e);

  };

  btnCont.onclick = function(e) {

    submit(e);

  };

  function submit(which) {

    caller = which.target.name;

    var errors = '';

    if(caller == 'btnPrev') {

      forename = frmPrev['name'].value.trim();
      surname = frmPrev['surname'].value.trim();
      phone = frmPrev['phone'].value.trim();
      email = frmPrev['email'].value.trim();
      message = frmPrev['message'].value.trim();
      privacy = frmPrev['privacy'].checked;

    }

    if(caller == 'btnCont') {

      phone = frmCont['phone'].value.trim();
      email = frmCont['email'].value.trim();
      message = frmCont['message'].value.trim();

    }

    errors = validateFields(caller, forename, surname, phone, email, privacy, message);

    if(errors == '') {

      var params = 'which=' + caller;
      params += '&fname=' + forename;
      params += '&sname=' + surname;
      params += '&tel=' + phone;
      params += '&email=' + email;
      params += '&priv=' + privacy;
      params += '&mess=' + message;

      var request = asyncRequest();

      request.open('POST', "send-mail.php", true);
      request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      request.setRequestHeader('Content-length', params.length);
      request.setRequestHeader('Connection', 'close');

      request.onreadystatechange = function() {

        if(this.readyState == 4) {

          if(this.status == 200) {

            if(this.responseText != null) {

              infoBox.innerHTML = this.responseText;

            } else {

              infoBox.innerHTML = '<p>No data from server!</p>';

            }

          } else {

            infoBox.innerHTML = '<p>Could not connect to server! (error: ' + this.statusText + ' )</p>';

          }

        }

      }

      request.send(params);

    } else {

      infoBox.innerHTML = errors;

    }

    infoBox.style.display = 'block';

  }

  infoBoxClose.onclick = function() {

    infoBox.style.display = 'none';
    infoBox.innerHTML = '';

  };

  function validateFields(_caller, _forename, _surname, _phone, _email, _privacy, _message) {

    var errs = '';

    if(_caller == 'btnPrev') {

      errs += validateForename(_forename);
      errs += validateSurname(_surname);
      errs += validatePhone(_phone);
      errs += validateEmail(_email);
      errs += validateMessage(_message);
      errs += validatePrivacy(_privacy);

    }

    if(_caller == "btnCont") {

      errs += validatePhone(_phone);
      errs += validateEmail(_email);
      errs += validateMessage(_message);

    }

    return errs;

  }

  function asyncRequest() {

    var request;

    try {

      request = new XMLHttpRequest();

    }

    catch(e1) {

      try {

        request = new ActiveXObject('Msxml2.XMLHTTP');

      }

      catch(e2) {

        try {

          request = new ActiveXObject('Microsoft.XMLHTTP');

        }

        catch(e3) {

          request = null;

        }

      }

    }

    return request;

  }

})();

Web控制台不断告诉我未定义单个验证功能。

为什么？

应该从外部脚本中加载它们。此外，它们应该具有全局作用域。

预先感谢您：）

Answer 1

问题解决了！

外部脚本的路径不正确。

对不起，这个垃圾！ ^^“

JavaScript-自调用函数无法从外部脚本中看到函数

1 个答案: