实时验证消息错误

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 = "";
        }
    };

Answer 2

那是因为当你触发 keyUp 时所有验证器都会运行，为了有选择地运行一个特定的验证器，我添加了一个额外的检查 id触发您的 realTime() 功能的元素。

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

function realTime(elem){

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

    if(elem.id == 'emIn' && emInpVal.value.length <= 5){   
        msg = "Adres e-mail zbyt krótki.";
        loginBtn.disabled = true;
        loginBtn.style.backgroundColor = "red";
    } 
    else if(elem.id == 'emIn' && emInpVal.value.length > 5) {
        msg = "";
        loginBtn.disabled = false;
        loginBtn.style.backgroundColor = '#157e79';
    }

    if(elem.id == 'psIn' && psInpVal.value.length <= 6){
        msg = "password should be greater than or equal to 6"; 
        loginBtn.disabled = true;
        loginBtn.style.backgroundColor = "red";
    }    
    else if(elem.id == 'psIn' && 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 3

好的，我已经找到了那个问题的答案，谢谢你们的帮助第二，如果需要添加 &&

现在我有另一个问题，当我填写两个输入时，禁用属性变成假，所以每个条件都完成，我想删除第一个输入（电子邮件）的值，现在没有任何反应，条件是' t 改回 disabled = true，短邮件值的消息不显示..

function realTime(){
    var emInpVal = document.getElementById('emIn');
    var psInpVal = document.getElementById('psIn');      
    var msg = ""; 
    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 > 0 && psInpVal.value.length <= 6){
        msg = "Hasło jest za krótkie"
        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;
};

实时验证消息错误

Real time validation messages wrong

javascript

real-time