Question

我正在尝试通过制作一个简单的表单来学习如何使用JavaScript，但它并没有像我期望的那样工作。
我写了一些我觉得可行的验证功能，但我无法弄清楚它们为什么不可用我可以通过我的验证功能发出警报，但我调用的实际函数不会运行。

这是我的完整代码。

HTML

<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script src="index.js"></script>
</head>


<body>

    <div id="wrapper">

        <div id="Header">
            <div id="Link_One" class="Link">

                <p> Link One </p>

            </div>

            <div id="Link_Two" class="Link">

                <p> Link Two </p>

            </div>

            <div id="Link_Three" class="Link">

                <p> Link Three </p>

            </div>

            <div id="Link_Four" class="Link">

                <p> Link Four </p>

            </div>

            <div id="Link_Five" Class="Link">

                <p> Link Five </p>

            </div>
        </div>

        <div id="Column_Left">

            <form>
                <p> Name: </p>
                <input type="text" name="name" id="Name_Input">
                <p id="Name_Error"> Please enter a valid name. </p>
                </br> </br> </br>
                <p> Age: </p>
                <input type="number" name="age" id="Age_Input">
                <p id="Age_Error"> Please enter a valid age. </p>
                </br> </br> </br>
                <p> Email: </p>
                <input type="text" name="email" id="Email_Input">
                <p id="Email_Error"> Please enter a valid email. </p>
                </br> </br>
                <button type="button" id="Submit_Button" onclick="Verify()"> Submit </button>
            </form>
        </div>

        <div id="Column_Right">

        </div>

    </div>

</body>

</html>

CSS

html, body {
height: 100%;
width: 100%;
}

* {
padding: 0px;
margin: 0px;
}

#wrapper {
height: 100%;
width: 80%;
max-width: 1500px;
min-width: 800 px;
background-color: black;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px black;
}

#Column_Left {
height: 100%;
width: 50%;
background-color: LightGreen;
float: left;
}

#Column_Right {
height: 100%;
width: 50%;
background-color: Purple;
float: right;
}

#Header {
height: 10%;
width: 100%;

}

#Link_One {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Two {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Three {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Four {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

#Link_Five {
display: inline-block;
text-align: center;
height: 100%;
width: 19.5%;
background-color: DodgerBlue;
}

.Link {
border: 1px solid black;
}

.Link p {
line-height: 400%;
}

#Name_Error {
display: none;
}

#Age_Error {
display: none;
}

#Email_Error {
display: none;
}

的Javascript

var Age_Reg = /[0-9]/;
var Email_Reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
var Name_Reg = /[^A-Za-z0-9_'-]/;

function Name_Verify() {

    var Name = document.getElementById("Name_Input").value;

    if (Name_Reg.test(Name)) {

    } else {
        document.getElementById("Name_Error").style.display = inline;
}
}


function Age_Verify() {

    var Age = document.getElementById("Age_Input").value; 

    if (Age_Reg.test(Age)) {

    } else {
        document.getElementById("Age_Error").style.display = inline;
} 
}

function Email_Verify() {

    var Email = document.getElementById("Email_Input").value;

    if (Email_Reg.test(Email)) {

    } else {
        document.getElementById("Email_Error").style.display = inline;
} 
}

function Verify() {
    Name_Verify();
    Age_Verify();
    Email_Verify();
}

Answer 1

您尝试引用inline，就好像它是变量一样，我假设您的意思是使用引号... "inline"

无法使我的Javascript使用HTML

1 个答案: