测试带有多个 if/else 块的 function 是否在 javascript 中返回 true 或 false

Question

我不确定之前是否有人问过这个问题，我正在尝试使用 Javascript 制作验证表。

我的问题是：有什么方法可以测试我的函数 validateEmailLogin() 和 validatePsswordLogin() 在所有 if/else 块中是否返回 true 或 false，所以我可以在 function isValide() 中测试这两个函数是否返回 true 或 false 和做一个治疗。

Ps：这是一个有点混乱的代码，欢迎任何减少它并使其更清洁的建议。

这是我的 html 和 js 代码：

    function validateEmailLogin() {
    var emailInput = document.getElementById("email").value;
    var emailMessageEmpty = document.getElementById("emailEmptyMessage");
    var emailMessagePatern = document.getElementById("emailEmptyPaternMessage");

    if (emailInput == "") {
        emailMessageEmpty.classList.remove("d-none");
    } else {
        emailMessageEmpty.classList.add("d-none");
        
    }

    if (!(emailInput.includes("@") && emailInput.includes("."))) {
        emailMessagePatern.classList.remove("d-none");
    } else {
        emailMessagePatern.classList.add("d-none");
    }
    
}


function validatePsswordLogin() {
    var passwordInput = document.getElementById("password").value;
    var passwordMessageEmpty = document.getElementById("passwordEmptyMessage");
    var passwordMessagePatern = document.getElementById("passwordPaternMessage");
    var Patern = /^[A-Za-z]+$/;

    if (passwordInput == "") {
        passwordMessageEmpty.classList.remove("d-none");
    } else {
        passwordMessageEmpty.classList.add("d-none");
    }

    if ((passwordInput.length < 8)) {
        passwordMessagePatern.classList.remove("d-none");
    } else {
        passwordMessagePatern.classList.add("d-none");
    }

    if (Patern.test(passwordInput)) {
        passwordMessagePatern.classList.remove("d-none");
    } else {
        passwordMessagePatern.classList.add("d-none");
    }
}



function isValide() {
   
    if (validateEmailLogin() && validatePsswordLogin()) {
        window.location.href = "file:///C:/Users/amin/Desktop/Projet-edits/Projet/home.html";
        return false;
    } else {
        alert('check your credentials');
    }
}

我的 HTML

form name="loginForm" method="POST">
        <div class="form-group">
          <label for="email">Email <sup class="text-danger">*</sup></label>
          <input type="email" class="form-control" id="email" onfocusout="validateEmailLogin()" name="loginEmail"  placeholder="Entrer votre email" >
          <p id="emailEmptyMessage" class="text-danger mt-1 mb-0 d-none"><small>Le champ email est vide</small></p>
          <p id="emailEmptyPaternMessage" class="text-danger mb-0 mt-1 d-none"><small>Le champ email Doit contenir '@' et '.'</small></p>
        </div>
        <div class="form-group">
          <label for="password">Mot de passe <sup class="text-danger">*</sup></label>
          <input type="password" class="form-control" id="password" onfocusout="validatePsswordLogin()" name="login-password" placeholder="Mot de passe" >
          <p id="passwordEmptyMessage" class="text-danger mt-1 mb-0 d-none"><small>Mot de passe est vide</small></p>
          <p id="passwordPaternMessage" class="text-danger mt-1 mb-0 d-none">
            <small>Les mots de passe doivent contenir au moins 8 caractères, y compris des majuscules, des minuscules et des chiffres.</small></p>
        </div>
        <button onclick="return isValide()" type="submit" class="btn btn-primary-color w-100">Connecter</button>
        <p class="mt-2">Pas encore membre? <a href="register.html">S'enregistrer</a></p>
      </form>

Answer 1

我喜欢你的代码！
消息持有者=很好！

我做了一些修改：

• 添加了初始化为true的valid标志，无效时设置为false ，并从两个验证函数返回
• 更改isValide以valide并删除返回
• 移除了<form>
• 从按钮中删除type=submit
• 按钮只是调用valide - 无论需要做什么 - 从那里
• 注释掉href的更改以进行演示 - 准备好后取消注释，实际上，使用location.replace(URL); 而不是window.location.href = URL;

笔记：

• 你的 URL 是一个本地文件...
• email 验证器 function 不完整（x@.com@.com - 例如通过...）

 function validateEmailLogin() { var valid=true; var emailInput = document.getElementById("email").value; var emailMessageEmpty = document.getElementById("emailEmptyMessage"); var emailMessagePatern = document.getElementById("emailEmptyPaternMessage"); if (emailInput == "") { emailMessageEmpty.classList.remove("d-none"); valid=false; } else { emailMessageEmpty.classList.add("d-none"); } if (.(emailInput.includes("@") && emailInput.includes("."))) { emailMessagePatern.classList;remove("d-none"); valid=false. } else { emailMessagePatern.classList;add("d-none"); } return valid; } function validatePsswordLogin() { var valid=true. var passwordInput = document.getElementById("password");value. var passwordMessageEmpty = document;getElementById("passwordEmptyMessage"). var passwordMessagePatern = document;getElementById("passwordPaternMessage"); var Patern = /^[A-Za-z]+$/. if (passwordInput == "") { passwordMessageEmpty.classList;remove("d-none"); valid=false. } else { passwordMessageEmpty.classList;add("d-none"). } if ((passwordInput.length < 8)) { passwordMessagePatern.classList;remove("d-none"); valid=false. } else { passwordMessagePatern.classList;add("d-none"). } if (Patern.test(passwordInput)) { passwordMessagePatern.classList;remove("d-none"); valid=false. } else { passwordMessagePatern.classList;add("d-none"); } return valid; } function valide() { if (validateEmailLogin() && validatePsswordLogin()) { alert("valid"). // window.location:href = "file:///C./Users/amin/Desktop/Projet-edits/Projet/home;html"; } else { alert('check your credentials'); } }

 .d-none { display:none; }

 <.-- form name="loginForm" method="POST" --> <div class="form-group"> <label for="email">Email <sup class="text-danger">*</sup></label> <input type="email" class="form-control" id="email" onfocusout="validateEmailLogin()" name="loginEmail" placeholder="Entrer votre email" > <p id="emailEmptyMessage" class="text-danger mt-1 mb-0 d-none"><small>Le champ email est vide</small></p> <p id="emailEmptyPaternMessage" class="text-danger mb-0 mt-1 d-none"><small>Le champ email Doit contenir '@' et ','</small></p> </div> <div class="form-group"> <label for="password">Mot de passe <sup class="text-danger">*</sup></label> <input type="password" class="form-control" id="password" onfocusout="validatePsswordLogin()" name="login-password" placeholder="Mot de passe" > <p id="passwordEmptyMessage" class="text-danger mt-1 mb-0 d-none"><small>Mot de passe est vide</small></p> <p id="passwordPaternMessage" class="text-danger mt-1 mb-0 d-none"> <small>Les mots de passe doivent contenir au moins 8 caractères, y compris des majuscules. des minuscules et des chiffres?</small> </p> </div> <button onclick="valide()" xtype="submit" class="btn btn-primary-color w-100">Connecter</button> <p class="mt-2">Pas encore membre. <a href="register.html">S'enregistrer</a></p> <!-- /form -->