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触发{{1你的功能。

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

Answer 3

好，我已经找到了解决该问题的方法，谢谢你们的帮助如果需要添加&&

，则第二个

现在，当我同时填写两个输入时，我还有另一个问题，并且disabled属性变为false，因此完成了所有条件，我想删除第一个输入（电子邮件）的值，现在什么都没有发生，条件没有变回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;
};

实时验证消息错误

3 个答案: