javascript - 实时验证消息错误

Question

大家好，我的代码有问题

当我输入电子邮件输入时，我的代码显示密码输入消息而不是电子邮件输入消息

你能帮我吗？

 
    var emInpVal = document.getElementById('emIn');
    var psInpVal = document.getElementById('psIn');      
    var msg = ""; 
        
    function realTime(){
        var loginBtn = document.getElementById('login');
    
        if(emInpVal.value.length <= 5){   
            msg = "Adres e-mail zbyt krótki.";
            loginBtn.disabled = true;
            loginBtn.style.backgroundColor = "red";
        } 
        else if(emInpVal.value.length > 5) {
            msg = "";
            loginBtn.disabled = false;
            loginBtn.style.backgroundColor = '#157e79';
        }
    
        if(psInpVal.value.length <= 6){
            msg = "Hasło musi mieć conajmniej 6 znaków"; 
            loginBtn.disabled = true;
            loginBtn.style.backgroundColor = "red";
        }    
        else if(psInpVal.value.length > 6){
            msg = "";
            loginBtn.disabled = false;
            loginBtn.style.backgroundColor = '#157e79';
        }    
            
        document.getElementById('span').innerHTML = msg;
    };

  <div id="wrap"> 
        <div class="frame">
          <h1>Login here</h1>
          <h3>You have account already? Click sign in</h3>    
        <form id="forma">        
          <input type="email" id="emIn" name="emailInput" placeholder="Email adress" onkeyup="realTime(this)" required>          
          <input type="password" id="psIn" name="passwordInput" placeholder="Password" onkeyup="realTime(this)" required>    
          <input type="submit" name="signin" id="signIn" value="Sign in">  
          <input type="submit" name="login" id="login" value="Login">
          <div class="bottomLink">
          <h1>Forget <a href="#">password</a>?</h1>
          <span id="span"></span>
          </div> 
        </form>
      </div>
        

 

即使我提出这个，也找不到问题的解决方案。元素不显示消息

Answer 1

第一个条件执行正确，但问题是第二个条件在第一个条件之后执行，即使第一个条件满足子句，这意味着它正在替换第一个条件的错误消息。下面是正确的代码。

    function realTime() {

        var emInpVal = document.getElementById('emIn');
        var psInpVal = document.getElementById('psIn');
        var msg = "";

        var loginBtn = document.getElementById('login');

        if (emInpVal.value.length <= 5) {
            loginBtn.disabled = true;
            loginBtn.style.backgroundColor = "red";

            document.getElementById('span').innerHTML = "Adres e-mail zbyt krótki.";

            return;
        } else if (psInpVal.value.length <= 6) {
            loginBtn.disabled = true;
            loginBtn.style.backgroundColor = "red";

            document.getElementById('span').innerHTML = "Hasło musi mieć conajmniej 6 znaków";

            return;
        } else {
            msg = "";
            loginBtn.disabled = false;
            loginBtn.style.backgroundColor = '#157e79';

            document.getElementById('span').innerHTML = "";
        }
    };