JavaScript中的表單驗證代碼錯誤

Question

form.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation in Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<body>
    <div id="form">
        <h1>Registration Form</h1><br><br>
        <form name="registerform" onsubmit="validation()">
            <label>FirstName:</label>
            <input type="text" name="firstname" placeholder="firstname"/>
            <span class="error" id="firstnameerror">hello</span><br><br>
            <label>LastName:</label>
            <input type="text" name="lastname" placeholder="lastname"/><br><br>
            <label>Email:</label>
            <input type="email" name="email" placeholder="email"/><br><br>
            <label>UserName:</label>
            <input type="text" name="username" placeholder="username"/><br><br>
            <label>Password:</label>
            <input type="password" name="password" placeholder="*******"/><br><br>
            <button type="submit" name="submit" >Register</button>
        </form>
    </div>
    <script src="script.js"></script>   
</body>
</head>
</html>

style.css
*{
    margin:0px;
    padding:0px;
}
body{
    background-color:skyblue;
}
form{
    margin-left:400px;
    margin-top:100px;
}
h1{
    text-align:center;
}
input{
    width:40%;
    height:35px;
}
label{
    width:120px;
    float:left;
    height:35px;
    font-size:25px;
}
button{
    width:120px;
    height:50px;
    border-radius:6px;
    background-color:green;
    color:black;
}

腳本。 js文件

function validation(){
    var firstname=document.forms["registerform"]["firstname"].value;
    var lastname=document.forms["registerform"]["lastname"].value;
    var email=document.forms["registerform"]["email"].value;
    var username=document.forms["registerform"]["username"].value;
    var pwd=document.forms["registerform"]["password"].value;

    if(firstname=="")
    {
        document.getElementById("firstnameerror").innerHTML="Please enter the username";
    }
}

我的問題是，每當我單擊表單驗證功能的提交按鈕時，都調用了該按鈕，但是沒有看到錯誤消息，請水平輸入用戶名，而您好在span標記中為什么我要顯示自定義消息的標記為什么要輸入用戶名？用戶想要提交但代碼不起作用時在用戶名字段中填寫空白

Answer 1

單擊按鈕時單擊驗證函數，如果有錯誤，請返回false以防止表單提交。

 function validation(){ var firstname=document.forms["registerform"]["firstname"].value; var lastname=document.forms["registerform"]["lastname"].value; var email=document.forms["registerform"]["email"].value; var username=document.forms["registerform"]["username"].value; var pwd=document.forms["registerform"]["password"].value; if(firstname=="") { document.getElementById("firstnameerror").innerHTML="Please enter the username"; return false; } }

  margin:0px; padding:0px; } body{ background-color:skyblue; } form{ margin-left:400px; margin-top:100px; } h1{ text-align:center; } input{ width:40%; height:35px; } label{ width:120px; float:left; height:35px; font-size:25px; } button{ width:120px; height:50px; border-radius:6px; background-color:green; color:black; } scri

 <!DOCTYPE html> <html lang="en"> <head> <title>Form Validation in Javascript</title> <link rel="stylesheet" type="text/css" href="style.css"/> <body> <div id="form"> <h1>Registration Form</h1><br><br> <form name="registerform" > <label>FirstName:</label> <input type="text" name="firstname" placeholder="firstname"/> <span class="error" id="firstnameerror">hello</span><br><br> <label>LastName:</label> <input type="text" name="lastname" placeholder="lastname"/><br><br> <label>Email:</label> <input type="email" name="email" placeholder="email"/><br><br> <label>UserName:</label> <input type="text" name="username" placeholder="username"/><br><br> <label>Password:</label> <input type="password" name="password" placeholder="*******"/><br><br> <button type="submit" name="submit" onclick="validation()">Register</button> </form> </div> </body> </head> </html>

JavaScript中的表單驗證代碼錯誤

問題描述

1 個解決方案

解決方案1
2 2017-02-03 07:37:55

JavaScript中的表單驗證代碼錯誤

問題描述

1 個解決方案

解決方案1 2 2017-02-03 07:37:55

解決方案1
2 2017-02-03 07:37:55