Fatal编程技术网
  • javascript/
  • 简单JavaScript验证不起作用？

简单JavaScript验证不起作用？

javascript html validation

简单JavaScript验证不起作用？,javascript,html,validation,Javascript,Html,Validation,不知道为什么这不起作用 <!DOCTYPE html> <html> <head> <title>Player 1</title> <link rel="stylesheet" type="text/css" href="playerOne.css"> </head> <body> <div id="heading"> <h>Playe

不知道为什么这不起作用

<!DOCTYPE html>

<html>
<head>
    <title>Player 1</title>
    <link rel="stylesheet" type="text/css" href="playerOne.css">
</head>
<body>
    <div id="heading">
        <h>Player 1</h> 
    </div>
    <form name="playerInfo" onsubmit="return validate()" method="post">
    <hr>
        <fieldset>
            <legend>Personal information:</legend>
            <label id="inPID">Player ID:</label>
            <br>
            <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus >
            <br>
            <br>
            <label id="inFN">First name:</label>
            <br>
            <input type="text" name="firstname" class="input" id="fname" placeholder="First name" >
            <br>
            <br>
            <label id="inLN">Last name:</label>
            <br>
            <input type="text" name="lastname" class="input" id="sname" placeholder="Last name" >
            <br>
            <br>
            <label id="inEA">Email address:</label>
            <br>
            <input type="text" name="email" class="input" id="email" placeholder="Email address">
            <br>
            <br>
            <label id="inPW">Password:</label>
            <br>
            <input type="password" name="password" class="input" id="pass" >
            <br>
            <br>
            <input type="submit" value="Validate" class="input" id="validate" >

        </fieldset>
    <hr>
    </form>
    <div id="error"></div>

    <script>
    function testVal(){
        return false;
    }


    function validate() {
        var message;
        var test = true;
        message = document.getElementById("error");
        message.innerHTML += "";

        var x = document.getElementById("id");
        if(x.value == ""|| x.value == null||x.value== "Player ID") {
            x.style.backgroundColor = "#FF0000";
            message.innerHTML += "Player ID is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("fname");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "First name is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("sname");
        if(x.value == "") {
            x.style.borderColor ="#FF0000";
            message.innerHTML += "Surname is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("email");
        if(x.value == "") {
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Email is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("pass");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Password is missing\n";
            test = false;
        }else{

        }
        return test;
    }
    </script>

</body>


玩家1
玩家1


个人资料：
玩家ID:






名字：






姓氏：






电邮地址：






密码：








函数testVal（）{
返回false；
}
函数验证（）{
var消息；
var检验=真；
message=document.getElementById（“错误”）；
message.innerHTML+=“”；
var x=document.getElementById（“id”）；
如果（x.value==“”| | x.value==null | | x.value==“玩家ID”）{
x、 style.backgroundColor=“#FF0000”；
message.innerHTML+=“缺少玩家ID\n”；
测试=假；
}否则{
}
var x=document.getElementById（“fname”）；
如果（x.value==“”）{
x、 style.borderColor=“#FF0000”；
message.innerHTML+=“缺少名字\n”；
测试=假；
}否则{
}
var x=document.getElementById（“sname”）；
如果（x.value==“”）{
x、 style.borderColor=“#FF0000”；
message.innerHTML+=“缺少姓氏\n”；
测试=假；
}否则{
}
var x=document.getElementById（“电子邮件”）；
如果（x.value==“”）{
x、 style.borderColor=“#FF0000”；
message.innerHTML+=“电子邮件丢失\n”；
测试=假；
}否则{
}
var x=document.getElementById（“pass”）；
如果（x.value==“”）{
x、 style.borderColor=“#FF0000”；
message.innerHTML+=“缺少密码\n”；
测试=假；
}否则{
}
回归试验；
}

因此，如果输入不正确（或为空），它应该将边框的颜色更改为红色，并在div中通知用户。出于某种原因，代码总是在提交时没有识别错误。我也是JavaScript（和html）的初学者，如果有人对改进这段代码有任何意见，我将不胜感激

编辑：道歉。我上传了错误版本的代码testval函数只是用来检查onsubmit是否正常工作，而validate函数现在被称为onsubmit，它应该在哪里/什么时候工作，但不工作

<!DOCTYPE html>

<html>
<head>
    <title>Player 1</title>
    <link rel="stylesheet" type="text/css" href="playerOne.css">
</head>
<body>
    <div id="heading">
        <h>Player 1</h> 
    </div>
    <form name="playerInfo" onsubmit="return validate()" method="post">
    <hr>
        <fieldset>
            <legend>Personal information:</legend>
            <label id="inPID">Player ID:</label>
            <br>
            <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus >
            <br>
            <br>
            <label id="inFN">First name:</label>
            <br>
            <input type="text" name="firstname" class="input" id="fname" placeholder="First name" >
            <br>
            <br>
            <label id="inLN">Last name:</label>
            <br>
            <input type="text" name="lastname" class="input" id="sname" placeholder="Last name" >
            <br>
            <br>
            <label id="inEA">Email address:</label>
            <br>
            <input type="text" name="email" class="input" id="email" placeholder="Email address">
            <br>
            <br>
            <label id="inPW">Password:</label>
            <br>
            <input type="password" name="password" class="input" id="pass" >
            <br>
            <br>
            <input type="submit" value="Validate" class="input" id="validate" >

        </fieldset>
    <hr>
    </form>
    <div id="error"></div>

    <script>
    function testVal(){
        return false;
    }


    function validate() {
        var message;
        var test = true;
        message = document.getElementById("error");
        message.innerHTML += "";

        var x = document.getElementById("id");
        if(x.value == ""|| x.value == null||x.value== "Player ID") {
            x.style.backgroundColor = "#FF0000";
            message.innerHTML += "Player ID is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("fname");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "First name is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("sname");
        if(x.value == "") {
            x.style.borderColor ="#FF0000";
            message.innerHTML += "Surname is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("email");
        if(x.value == "") {
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Email is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("pass");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Password is missing\n";
            test = false;
        }else{

        }
        return test;
    }
    </script>

</body>
编辑2：感谢您对格式和正确标记使用的帮助。我已经根据您的建议对其进行了编辑，但是实际的验证（功能）仍然不起作用，尽管包含引号

参考资料：

查看您的控制台错误

首先是testVal中的一个输入错误-
“retrun”
，而不是
“return”

接下来，需要引用字符串，以便
x.style.borderColor=#FF0000需要
x.style.borderColor=“#FF0000”


除此之外，在提供的代码中，您实际上似乎没有调用
validate（）
。此外，还可以研究为
输入
元素使用
占位符
属性，或者（可能更合适）使用
标签
元素，而不是将标签放入每个输入值中的方法。
查看控制台错误

首先是testVal中的一个输入错误-
“retrun”
，而不是
“return”

接下来，需要引用字符串，以便
x.style.borderColor=#FF0000需要
x.style.borderColor=“#FF0000”


除此之外，在提供的代码中，您实际上似乎没有调用
validate（）
。另外，考虑使用
占位符
属性作为
输入
元素，或者更合适的是使用
标签
元素，而不是将标签放在每个输入的值中。
您为JavaScript变量指定了相同的名称
x
。我也把你的表格改了一点

一些建议：


  • a.innerHTML+=“Some string\n”
    中的
    \n
    不起作用。改用
    “
    ”
    • 

  • 请为不同的变量指定不同的名称
    • 

  • 使用
    占位符
    属性而不是
    值
    来建议用户
    • 

  • 使用
    message
    变量保存错误消息，而不是直接设置
    innerHtml
    ，因为Javascript使用传递值（请参阅）
    • 

  • 当您更加熟悉Javascript时，您会想要学习。它提供了一个很好的API，可以简化时间编码，并使Html遍历、事件处理和Ajax更加简单。是学习jQuery的好地方
    • 
修复了Javascript和Html：
    


    函数验证（）{
var message=“”；
var检验=真；
var id=document.getElementById（“id”）；
如果（id.value==“”| | id.value==null）{
id.style.backgroundColor=“#FF0000”；
消息+=“缺少玩家ID
    ”；
测试=假；
}否则{
}
var fname=document.getElementById（“fname”）；
如果（fname.value==“”| | fname.value==null）{
fname.style.borderColor=“#FF0000”；
消息+=“缺少名字
    ”；
测试=假；
}否则{
}
var sname=document.getElementById（“sname”）；
if（sname.value==“”| | sname.value==null）{
sname.style.borderColor=“#FF0000”；
消息+=“缺少姓氏
    ”；
测试=假；
}否则{
}
var email=document.getElementById（“电子邮件”）；
如果（email.value==“”| | email.value==null）{
email.style.borderColor=“#FF0000”；
消息+=“电子邮件丢失
    ”；
测试=假；
}否则{
}
var x=document.getE