javascript - 表格无法进一步发展，似乎陷入功能困境

Question

当检查语言、学位或汽车选项之一并填写相应的输入时，表格卡在 Cage() 函数上(它显示消息但没有进一步进展)我不知道为什么有任何线索？我也通过把上面的函数(Cemail,Cuser,Checkpassword)一个一个去掉发现都卡住了，不让按钮启用。是不是enableMe()if里boolean函数太多了？ 我是一名学生，还在学习中，让我头疼了提前见谅。

function Cuser() {
    var Us = document.getElementById("User").value;
    if (Us.length < 7 || Us.length > 15) {
        l1.innerHTML = "The username must be at least 7 characters and up to 15";
        return false;
    }
    else if (Us == "" || Us == " " || Us == "  " || Us == "   " || Us == null) {
        l1.innerHTML = "The username must be filled with at least 7 characters";
        return false;
    }
    else {
        l1.innerHTML = "Username is Valid";
        return true
    }
}
function Cemail() {
    var Em = document.getElementById("mail").value;
    var patt = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (Em == "" || Em == " " || Em == "  " || Em == "   " || Em == null) {
        l1.innerHTML = "Please fill out the email";
        return false;
    }
    else if (!patt.test(Em)) {
        l1.innerHTML = "Please fill out the email correctly";
        return false;
    }
    else {
        l1.innerHTML = "email is valid";
        return true;
    }
}
function CheckPassword() {
    var p = document.getElementById("pass1").value;
    var p1 = document.getElementById("pass2").value;
    var pattent = /[A-Z]/;
    if (p == "" || p == " " || p == "  " || p == "   " || p == null) {
        l1.innerHTML = "The password must be filled with at least 6 characters";
        return false;
    }
    else if (p.length < 6 || p1.length > 12) {
        l1.innerHTML = "Password min chars:6 Max chars:12";
        return false;
    }
    else if (!p.match(pattent)) {
        l1.innerHTML = "please include at least one capital letter"
    return false;
    }
    else if (p1 != p) {
        l1.innerHTML = "Passwords must be identical.";
        return false;
    }
    else {
        l1.innerHTML = "password is valid";
        return true;
    }

}
function checkPasswordStrenght() {
    var x = document.getElementById("pass1").value;
    if (x.length == 6) {
        document.getElementById("strenght").value = "0";
    }

    if (x.length == 7) {
        document.getElementById("strenght").value = "15";

    }
    if (x.length == 8) {
        document.getElementById("strenght").value = "30";
    }
    if (x.length == 9) {
        document.getElementById("strenght").value = "45";

    }
    if (x.length == 10) {
        document.getElementById("strenght").value = "65";

    }
    if (x.length == 11) {
        document.getElementById("strenght").value = "80";
    }
    if (x.length == 12) {
        document.getElementById("strenght").value = "100";
    }
}
function Cage() {
    var Ag = document.getElementById("Age").value;
    if (isNaN(Ag) == true || Ag == "  " || Ag == "" || Ag == " ") {
        l1.innerHTML = "Age must be a number.";
        return false;
    }
    else if (Ag < 18) {
            l1.innerHTML = "You must be an Adult to use this form";
        return false;

    }
    else {
        l1.innerHTML = "Age is valid";
        return true;
    }
}

function DisableMe() {
    document.getElementById("butt").disabled = true;
}

function myCar() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true) {
        text.style.display = "block";
    } else {
        text.style.display = "none";
    }
}
function myDegree() {
    var checkBox = document.getElementById("myDeg");
    var text = document.getElementById("Ddeg");
    if (checkBox.checked == true) {
        text.style.display = "block";
    } else {
        text.style.display = "none";
    }
}
function myLangu() {
    var checkBox = document.getElementById("myLang");
    var text = document.getElementById("Llang");
    if (checkBox.checked == true) {
        text.style.display = "block";
    } else {
        text.style.display = "none";
    }
}

function Checker() {
  

    if (document.getElementById("GF").checked == false && document.getElementById("GM").checked == false) {
        l1.innerHTML = "Please select your gender";
        return false;
    }
    else {
        return true;
    }
}
    
function CChecker() {
    var Cheddar = document.getElementById("myCheck").checked;
    var Ham = document.getElementById("TypeOfCar").value;
    if (Cheddar == true) {
        if (Ham == "" || Ham == " " || Ham == "  " || Ham == "   " || Ham == null) {
            l1.innerHTML = "Please Fill in the type of car you own";
           
        }
    }
    else {
        return true;
    }
}
function LChecker() {
    var Lettuce = document.getElementById("myLang").checked;
    var Tomato = document.getElementById("TypeOfLang").value;
    if (Lettuce == true) {
        if (Tomato == "" || Tomato == " " || Tomato == "  " || Tomato == "   " || Tomato == null) {
            l1.innerHTML = "Please Fill in at least one foreign language that you know";
           
        }
    }
    else {
        return true;
    }
}
function DChecker() {
    var Bread = document.getElementById("myDeg").checked;
    var Mayo = document.getElementById("TypeOfDeg").value;
    if (Bread == true) {
        if (Mayo == "" || Mayo == " " || Mayo == "  " || Mayo == "   " || Mayo == null) {
            l1.innerHTML = "Please Fill in at least one degree you own";
            
        }
    }
    else {
        return true;
    }
}

function enableMe() {
    if (Cuser() && Cemail && CheckPassword && Cage() && Checker() && CChecker() && LChecker() && DChecker()) {
        document.getElementById("butt").disabled = false;
        l1.innerHTML = "All credentials are valid";
        return true;
    }
    else {
        document.getElementById("butt").disabled = true;
    }

}

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <meta name="description" content="Form signup and php">
    <meta name="keywords" content="Signup,html,php,react">
    <meta name="author" content="Filippos Karagiannis">
    <link href="StyleSheet.css" rel="stylesheet" />
    <title>Exclusive Signup</title>
    <script src="JavaScript.js"></script>
</head>
<body style="background-color:powderblue; text-align:center;" onload="DisableMe()">

    <center>
        <form action="react.html" display: inline - block;">


            <fieldset class="center" style="width:50%; font-size:x-large; color:#383838;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif">

                <legend><b>Sign up form</b></legend>
                <p>
                    <input type="text" id="User" name="Username" onchange="return Cuser()" placeholder="Type Username" />
                </p>

                <p>
                    <input type="email" id="mail" name="Email" onchange="return Cemail()" placeholder="e-Mail" />
                </p>
                <p>
                    <input type="password" id="pass1" name="Pass1"
                           placeholder="Password" onkeyup="checkPasswordStrenght(pass1), CheckPassword()" />
                    <input type="password" id="pass2" name="Pass2"
                           placeholder="Confirm Password" />


                </p>
                <div class="Strng">Password strenght:</div> <progress max="100" value="0" id="strenght" style="width:230px"></progress>
                <p> <input type="text" id="Age" onchange="return Cage()" name="Age" placeholder="Type Age" /> </p>

                <div class="Strng">
                    Male<input type="radio" id="GM" name="gender" value="male">
                    <input type="radio" id="GF" name="gender" value="female"> Female
                </div>
                <div class=" Strng">Do you own a car?<input type="checkbox" id="myCheck" onclick="myCar()"></div>
                <div id="text" style="display:none"><input type="text" id="TypeOfCar" placeholder="Please inlcude the type of car" /></div>

                <div class=" Strng">Do you know any other Languages<input type="checkbox" id="myLang" onclick="myLangu()"></div>
                <div id="Llang" style="display:none"><input type="text" id="TypeOfLang" placeholder="Please inlcude the Languages" /></div>

                <div class=" Strng">Do you own any postgraduate degrees<input type="checkbox" id="myDeg" onclick="myDegree()"></div>
                <div id="Ddeg" style="display:none"><input type="text" id="TypeOfDeg" placeholder="Please inlcude the type of Degrees" /></div>
 

                <p><div onmouseover="return enableMe()">Click Bellow to register your credentials</div></p>
          
                    <div onmouseover="return enableMe()">
                        <input class="button" id="butt" type="submit" value="Register">
                    </div>
      
                <label class="Labbel" id="l1"></label>
            </fieldset>

        </form>
    </center>
</body>
</html>

Answer 1

以及 Burham 在评论中提到的一些语法错误。

按钮无法启用的原因是您的 CChecker()、LChecker() 和 DChecker() 函数，您永远不会如果选择了一个并填充了一个值，则返回 true。

返回添加位置示例(查看评论，在同一位置添加到其他功能):

function CChecker() {
    var Cheddar = document.getElementById("myCheck").checked;
    var Ham = document.getElementById("TypeOfCar").value;
    if (Cheddar == true) {
        if (Ham == "" || Ham == " " || Ham == "  " || Ham == "   " || Ham == null) {
            l1.innerHTML = "Please Fill in the type of car you own";

        }
        // else return true
        else {
            return true;
        }
    }
    else {
        return true;
    }
}