Question

我希望在其范围之外获得validatePassword（）和validate（）函数的返回值。这些值应该在函数firstNextButton（）中返回。如果两个输入字段都经过验证，则该按钮必须是可单击的，这意味着将禁用该元素内的属性。

(function validationPassword() {
        var inputPassWord = document.getElementById('inputpassword');
        var passErrorMessage = document.getElementById('password-error');
        
        function validatePassword() {
            var inputPasswordValue = inputPassWord.value;
            
            if(inputPasswordValue.length > 0) {
                passErrorMessage.innerHTML = "Password correct";
            } else {
                passErrorMessage.innerHTML = "Password incorrect";
            }
        }

        inputPassWord.onblur = function() {
            firstNextButton();
        }
    })();

    (function validationEmail() {
        var emailInput = document.getElementById('email');
        var emailError = document.getElementById('email-error');
        var email = emailInput.value;

        function validateEmail(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        function validate() {
            if(validateEmail(email)) {
                emailError.innerHTML = 'Email is correct';
            }
            else {
                emailError.innerHTML = 'mail not correct. Example: name@gmail.com';
            }
            return false;
        }    

        emailInput.onblur = function() {
            emailvalidate;
            firstNextButton();
        }
    })();

    function firstNextButton() {
        var firstButton = document.getElementById('firstStepButton');
        console.log('hello firstNextButton');

        // if(validate() && validatePassword()) {
        //     console.log('hello world');
        //     firstButton.removeAttribute('disabled', '');
        // } else {
        //     firstButton.setAttribute('disabled', '');
        // }
    }

<div class="form-block">
      <div class="required-field">
          <label class="control-label">Email Address</label>
          <input name="email" id="email" class="form-control contact-input" type="email" placeholder="<?= $this->lang->line('application_email_address') ?>" required>

          <span id="email-error"></span>
      </div>
  </div>

  <div class="form-block">
      <div class="required-field">
          <label class="control-label">Password</label>
          <input name="password" id="inputpassword" class="form-control contact-input" type="password" placeholder="<?= $this->lang->line('application_password') ?>" required>
          <span id="password-error"></span>
      </div>
  </div>
  <div>
  
    <button class="btn btn-info btn-round nextBtn pull-right" id="firstStepButton" type="button">Sign Up</button>
</div>

Answer 1

要完全回答您的问题，您可以按照以下方式返回所需的功能：

var validationPassword = (function validationPassword() {
  var inputPassWord = document.getElementById('inputpassword');
  var passErrorMessage = document.getElementById('password-error');

  function validatePassword() {
    var inputPasswordValue = inputPassWord.value;

    if (inputPasswordValue.length > 0) {
      passErrorMessage.innerHTML = "Password correct";
    } else {
      passErrorMessage.innerHTML = "Password incorrect";
    }
  }

  inputPassWord.onblur = function() {
    firstNextButton();
  }
  
  return {
    validatePassword: validatePassword
  };
})();

var validationEmail = (function validationEmail() {
  var emailInput = document.getElementById('email');
  var emailError = document.getElementById('email-error');
  var email = emailInput.value;

  function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }

  function validate() {
    if (validateEmail(email)) {
      emailError.innerHTML = 'Email is correct';
    } else {
      emailError.innerHTML = 'mail not correct. Example: name@gmail.com';
    }
    return false;
  }

  emailInput.onblur = function() {
    validate();
    firstNextButton();
  }
  
  return {
    validate: validate
  };
})();

function firstNextButton() {
  var firstButton = document.getElementById('firstStepButton');
  
  if(validationEmail.validate() && validationPassword.validatePassword()) {
       console.log('hello world');
       firstButton.removeAttribute('disabled', '');
  } else {
       firstButton.setAttribute('disabled', '');
  }
}

<div class="form-block">
  <div class="required-field">
    <label class="control-label">Email Address</label>
    <input name="email" id="email" class="form-control contact-input" type="email" placeholder="<?= $this->lang->line('application_email_address') ?>" required>

    <span id="email-error"></span>
  </div>
</div>

<div class="form-block">
  <div class="required-field">
    <label class="control-label">Password</label>
    <input name="password" id="inputpassword" class="form-control contact-input" type="password" placeholder="<?= $this->lang->line('application_password') ?>" required>
    <span id="password-error"></span>
  </div>
</div>
<div>

  <button class="btn btn-info btn-round nextBtn pull-right" id="firstStepButton" type="button">Sign Up</button>
</div>

或者重构代码并将它们带到模块范围之外。

作为旁注，您忘记了emailInput.onblur函数中的括号（并且也给了它错误的名称）：

emailInput.onblur = function() {
    validate(); // <---- Here
    firstNextButton();
}

此外，您不会在validePassword事件中调用onblur，也不会获取您尝试验证的输入值。在email = emailInput.value;函数的顶部添加validate之类的内容。

将范围内的函数继承到另一个函数

1 个答案: