Javascript HTML web表单的测试问题_Javascript_Html

Javascript HTML web表单的测试问题

javascript html

Javascript HTML web表单的测试问题,javascript,html,Javascript,Html,我正在尝试测试HTML web表单，但遇到一些问题如果正确输入了所有数据，则表单将打开一个辅助HTML文件（显示一条成功消息）。如果未输入数据或数据输入不正确，则字段名称应变为红色，并显示一条消息，指示用户重新输入信息我直接从Finder（我在Mac上）打开文件到GoogleChrome，在那里它完全显示出来。但是，无论我在输入字段中输入（或不输入）什么，代码都会将我指向成功消息代码如下： <head> <title>Form</title> <

我正在尝试测试HTML web表单，但遇到一些问题

如果正确输入了所有数据，则表单将打开一个辅助HTML文件（显示一条成功消息）。如果未输入数据或数据输入不正确，则字段名称应变为红色，并显示一条消息，指示用户重新输入信息

我直接从Finder（我在Mac上）打开文件到GoogleChrome，在那里它完全显示出来。但是，无论我在输入字段中输入（或不输入）什么，代码都会将我指向成功消息

代码如下：

<head>
<title>Form</title>

<script language="javascript" type="text/javascript">

function validateForm() {
    var result = true;
    var msg="";

    if (document.Entry.name.value=="") {
        msg+="You must enter your name \n";
        document.Entry.name.focus();
        document.getElementById(‘name’).style.color="red";
        result = false;
    }
    if (document.Entry.age.value=="") {
        msg+="You must enter your age \n";
        document.Entry.age.focus();
        document.getElementById(‘age’).style.color="red";
        result = false;
    }
    if (document.Entry.number.value=="") {
        msg+="You must enter your number \n";
        document.Entry.number.focus();
        document.getElementById(‘number’).style.color="red";
        result = false;
    }

    if(msg==""){
    return result; 
    }

    {
    alert(msg) 
    return result; 
    }
}

</script>
</head> 

<body>
<h1>Form</h1>
<form name="Entry" method="post" action="success.html">
<table width="50%" border="0">
    <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
    </tr>
    <tr>
        <td id="age">Age</td>
        <td><input type="text" name="age" /></td>
    </tr>
    <tr>
        <td id=”number”>Number</td>
        <td><input type="text" name="number"/></td>
    </tr>

<tr>
    <td><input type="submit" name="Submit" value="Submit" onclick="return 
    validateForm();" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
</tr>

</table>
</form>
</body>


形式
函数validateForm（）{
var结果=真；
var msg=“”；
if（document.Entry.name.value==“”）{
msg+=“您必须输入您的姓名\n”；
document.Entry.name.focus（）；
document.getElementById（'name'）.style.color=“红色”；
结果=假；
}
if（document.Entry.age.value==“”）{
msg+=“您必须输入您的年龄\n”；
document.Entry.age.focus（）；
document.getElementById（'age'）.style.color=“red”；
结果=假；
}
if（document.Entry.number.value==“”）{
msg+=“您必须输入您的号码\n”；
document.Entry.number.focus（）；
document.getElementById（'number'）.style.color=“红色”；
结果=假；
}
如果（msg==“”）{
返回结果；
}
{
警报（msg）
返回结果；
}
}
形式
名称
年龄
数

我已经查看了代码，我确信它是正确的，那么为什么HTML不能按预期工作呢？

您的表单操作是

success.HTML

，因此您的表单将提交到此页面，而不考虑您的javascript。

Javascript函数在单击时触发

，但它是一个submit
按钮，因此submit仍在触发。它提交到的页面是success.html，因此无论何时都会不断调用它，因为表单不断提交
 问题来自如何访问表单输入。在控制台中或在脚本块的开头键入：
console.log(document.Entry);

它将打印出未定义的
。您的代码正在抛出一个错误，失败并且从不返回一个假值来阻止表单提交
我建议看一看使用vanilla javascript访问表单输入的各种方法。
您的代码包含以下错误：

错误的“'”字符
错误的“字符”
使用保留字“number”

以下是固定工作（至少在Firefox中）代码：

形式
函数validateForm（）{
var结果=真；
var msg=“”；
if（document.Entry.name.value==“”）{
msg+=“您必须输入您的姓名\n”；
document.Entry.name.focus（）；
document.getElementById（'name'）.style.color=“红色”；
结果=假；
}
if（document.Entry.age.value==“”）{
msg+=“您必须输入您的年龄\n”；
document.Entry.age.focus（）；
document.getElementById（'age'）.style.color=“red”；
结果=假；
}
if（document.Entry.number.value==“”）{
msg+=“您必须输入您的号码\n”；
document.Entry.mumber.focus（）；
document.getElementById（'number'）.style.color=“红色”；
结果=假；
} 
如果（msg==“”）{
返回结果；
}
其他的
{
警报（msg）
返回结果；
}
}
形式
名称
年龄
数

明智的做法是将“result”变量初始化为“false”。这样，您只需在“msg”为空时更新它一次
似乎你应该选择其他编辑器/IDE。另外，试着调试你的JS脚本——你有适用于所有现代浏览器的调试器。我个人使用Firefox的Firebug插件。许多人使用Chrome开发者工具
此外，您可能会发现这个简单的参考资料非常方便：
我已经重写了您的代码。现在它可以工作了。您可以查看下面的工作示例JSFIDLE或复制粘贴示例：
<html>
    <head>
        <title>Form</title>
    </head>
    <body>
    <h1>Form</h1>
    <form name="Entry" method="post" action="">
        <table width="50%" border="0">
            <tr>
                <td id="name">Name</td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td id="subject">Age</td>
                <td><input type="text" name="age" id="age" /></td>
            </tr>
            <tr>
                <td id=”number”>Number</td>
                <td><input type="text" name="number" id="number"/></td>
            </tr>

            <tr>
                <td><button onclick="validateForm();" id="submit_btn" type="button" name="Submit" value="Submit">Submit</button></td>
                <td><input type="reset" name="Reset" value="Reset" /></td>

            </tr>
        </table>
    </form>


    <script type="text/javascript">
        //Assuring page is loaded
        document.onload = function(){
            validateForm();
        };

        var validateForm = function() {
            var result = true;
            var msg="";
            var name,age,number;


            name  = document.getElementsByName("name")[0];
            age  = document.getElementsByName("age")[0];
            number  = document.getElementsByName("number")[0];

            //Conditionals
            if (name.value =="") {
                msg+="You must enter your name \n";
                name.focus();
                name.style.color="red";
                result = false;
            }
            if (age.value=="") {
                msg+="You must enter your age \n";
                age.focus();
                age.style.color="red";
                result = false;
            }
            if (number.value=="") {
                msg+="You must enter your number \n";
                number.focus();
                number.style.color="red";
                result = false;
            }

            if(msg==""){
                return result;
            }

            {
                alert(msg);
                return result;
            }

        };
    </script>
    </body>
    </html>


形式
形式
名称
年龄
数
提交
//确保页面已加载
document.onload=函数（）{
validateForm（）；
};
var validateForm=函数（）{
var结果=真；
var msg=“”；
变量名称、年龄、编号；
name=document.getElementsByName（“名称”）[0]；
年龄=document.getElementsByName（“年龄”）[0]；
编号=document.getElementsByName（“编号”）[0]；
//条件句
如果（name.value==“”）{
msg+=“您必须输入您的姓名\n”；
name.focus（）；
name.style.color=“红色”；
结果=假；
}
如果（年龄值==“”）{
msg+=“您必须输入您的年龄\n”；
年龄。焦点（）；
age.style.color=“红色”；
结果=假；
}
if（number.value==“”）{
msg+=“您必须输入您的号码\n”；
number.focus（）；
number.style.color=“红色”；
结果=假；
}
如果（msg==“”）{
返回结果；
}
{
警报（msg）；
返回结果；
}
};
首先尝试将脚本放在表单之后的正文中
第二，我同意上面的说法，你的动作无论如何都会开火。你能不能不处理
<html>
    <head>
        <title>Form</title>
    </head>
    <body>
    <h1>Form</h1>
    <form name="Entry" method="post" action="">
        <table width="50%" border="0">
            <tr>
                <td id="name">Name</td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr>
                <td id="subject">Age</td>
                <td><input type="text" name="age" id="age" /></td>
            </tr>
            <tr>
                <td id=”number”>Number</td>
                <td><input type="text" name="number" id="number"/></td>
            </tr>

            <tr>
                <td><button onclick="validateForm();" id="submit_btn" type="button" name="Submit" value="Submit">Submit</button></td>
                <td><input type="reset" name="Reset" value="Reset" /></td>

            </tr>
        </table>
    </form>


    <script type="text/javascript">
        //Assuring page is loaded
        document.onload = function(){
            validateForm();
        };

        var validateForm = function() {
            var result = true;
            var msg="";
            var name,age,number;


            name  = document.getElementsByName("name")[0];
            age  = document.getElementsByName("age")[0];
            number  = document.getElementsByName("number")[0];

            //Conditionals
            if (name.value =="") {
                msg+="You must enter your name \n";
                name.focus();
                name.style.color="red";
                result = false;
            }
            if (age.value=="") {
                msg+="You must enter your age \n";
                age.focus();
                age.style.color="red";
                result = false;
            }
            if (number.value=="") {
                msg+="You must enter your number \n";
                number.focus();
                number.style.color="red";
                result = false;
            }

            if(msg==""){
                return result;
            }

            {
                alert(msg);
                return result;
            }

        };
    </script>
    </body>
    </html>