Javascript表单验证无效

Question

我想知道为什么我的表单验证无法正常工作，如果有人可以帮忙修复的话。 我需要它来验证表单中的输入，但它不起作用，只是提交。我理解大多数逻辑，但不知道它为什么不起作用

<form id="regform" method="post" action="register.php">
                <p>Areas marked with a (*) are required by the form!</p>
        <fieldset>
            <legend>Account Information</legend>
            <div class="textinput">
                <label for="username">User Name *</label>
                <input id="username" type="text" name="id" />
            </div>
            <div class="textinput">
                <label for="email">Email *</label>
                <input id="email" type="text" name="id" />
            </div>
            <div class="textinput">
                <label for="pwd1">Password *</label>
                <input id="pwd1" type="password" name="pwd1" />
                <span id="pwdHelpBtn" class="button" >Password Rule</span>
                <div id="pwdHelpWin" class="window" >
                    <p>Password must satisfy the following:</p>
                    <ul>
                        <li>Must be 8 characters long</li>
                        <li>Must contain atleast 1 number</li>
                        <li>Must contain atleast 1 upper & lower case letter</li>
                    </ul>
                    <span id="pwdHelpClose" class="button" >Close</span>
                </div>
            </div>
            <div class="textinput">
                <label for="pwd2">Retype Password *</label>
                <input id="pwd2" type="password" name="pwd2" />
            </div>
        </fieldset>
        <fieldset>
            <legend>User Information</legend>
            <div class="textinput">
                <label for="name">Name *</label>
                <input id="name" type="text" name="name" />
            </div>
            <div class="radioinput">
                <fieldset>
                    <legend>Gender *</legend>
                    <input id="genderm" type="radio" name="gender" value="M" />
                    <label for="genderm">Male</label>
                    <input id="genderf" type="radio" name="gender" value="F" />
                    <label for="genderf">Female</label>     
                </fieldset>
            </div>
        </fieldset> 
        <p>
            <input id="signup" type="submit" value="Submit"/>
        </p>
    </form>


function validate()
{   
    var pwd1 = document.getElementById("pwd1").value;
    var pwd2 = document.getElementById("pwd2").value;
    var username = document.getElementById("username").value;
    var genderm = document.getElementById("genderm").checked;
    var genderf = document.getElementById("genderf").checked;
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;

    var errmsg = "";
    var result = true;
    var pattern = /^[a-zA-z ]+$/;

    var pwd1length = pwd1.length;

    if(email == "")
    {
        errmsg += "Email cannot be empty\n";
    }
    else
    {
        if(!email.match("@"))
        {
            errmsg += "Please enter email address\n";
        }
    }
    if(pwd1 == "")
    {
        errmsg += "Please Enter a Password\n";
    }
    else
    {
        if(pwd1length < 6)
            errmsg += "Password must be atleast 6 characters long\n";
    }

    if(pwd2 == "")
    {
        errmsg += "Please Re-enter a Password\n";
    }
    else
    {
        if(pwd2 != pwd1)
        {
            errmsg += "Password does not match\n";
        }
    }
    if(username == "")
    {
        errmsg += "Please enter a User Name\n";
    }
    else
    {
        if(!username.match (pattern))
        {
            errmsg += "User Name Contains Symbols\n";
        }
    }
    if(!(genderm || genderf))
    {
        errmsg += "Please Select Gender\n";     
    }
        if(name != "")
    {
        errmsg += "Please enter a name\n"
    }
    if(errmsg != "")
    {   
        alert (errmsg);
        result = false;
    }
    return result;
}
function init()
{
    name = document.getElementById("name");
    email = document.getElementById("email");
    pwd1 = document.getElementById("pwd1");
    pwd2 = document.getElementById("pwd2");
    username = document.getElementById("username");

    var regForm = document.getElementById("regform");

    regForm.onsubmit = validate;

}

window.onload = init;

Answer 1

我找到了问题，您必须将以下代码if(name != "")替换为

 if(name == "")
    {
        errmsg += "Please enter a name\n"
    }

＆＃13;

＆＃13;

function validate()
{   
    var pwd1 = document.getElementById("pwd1").value;
    var pwd2 = document.getElementById("pwd2").value;
    var username = document.getElementById("username").value;
    var genderm = document.getElementById("genderm").checked;
    var genderf = document.getElementById("genderf").checked;
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;

    var errmsg = "";
    var result = true;
    var pattern = /^[a-zA-z ]+$/;

    var pwd1length = pwd1.length;

    if(email == "")
    {
        errmsg += "Email cannot be empty\n";
    }
    else
    {
        if(!email.match("@"))
        {
            errmsg += "Please enter email address\n";
        }
    }
    if(pwd1 == "")
    {
        errmsg += "Please Enter a Password\n";
    }
    else
    {
        if(pwd1length < 6)
            errmsg += "Password must be atleast 6 characters long\n";
    }

    if(pwd2 == "")
    {
        errmsg += "Please Re-enter a Password\n";
    }
    else
    {
        if(pwd2 != pwd1)
        {
            errmsg += "Password does not match\n";
        }
    }
    if(username == "")
    {
        errmsg += "Please enter a User Name\n";
    }
    else
    {
        if(!username.match (pattern))
        {
            errmsg += "User Name Contains Symbols\n";
        }
    }
    if(!(genderm || genderf))
    {
        errmsg += "Please Select Gender\n";     
    }
        if(name == "")
    {
        errmsg += "Please enter a name\n"
    }
    if(errmsg != "")
    {   
        alert (errmsg);
        result = false;
    }
  alert("SUCCESS");
    return result;
}
function init()
{
    name = document.getElementById("name");
    email = document.getElementById("email");
    pwd1 = document.getElementById("pwd1");
    pwd2 = document.getElementById("pwd2");
    username = document.getElementById("username");

    var regForm = document.getElementById("regform");

    regForm.onsubmit = validate;

}

window.onload = init;

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <form id="regform" method="post" action="register.php">
                <p>Areas marked with a (*) are required by the form!</p>
        <fieldset>
            <legend>Account Information</legend>
            <div class="textinput">
                <label for="username">User Name *</label>
                <input id="username" type="text" name="id" />Username must be a alphabet
            </div>
            <div class="textinput">
                <label for="email">Email *</label>
                <input id="email" type="text" name="id" />
            </div>
            <div class="textinput">
                <label for="pwd1">Password *</label>
                <input id="pwd1" type="password" name="pwd1" />
                <span id="pwdHelpBtn" class="button" >Password Rule</span>
                <div id="pwdHelpWin" class="window" >
                    <p>Password must satisfy the following:</p>
                    <ul>
                        <li>Must be 8 characters long</li>
                        <li>Must contain atleast 1 number</li>
                        <li>Must contain atleast 1 upper & lower case letter</li>
                    </ul>
                    <span id="pwdHelpClose" class="button" >Close</span>
                </div>
            </div>
            <div class="textinput">
                <label for="pwd2">Retype Password *</label>
                <input id="pwd2" type="password" name="pwd2" />
            </div>
        </fieldset>
        <fieldset>
            <legend>User Information</legend>
            <div class="textinput">
                <label for="name">Name *</label>
                <input id="name" type="text" name="name" />
            </div>
            <div class="radioinput">
                <fieldset>
                    <legend>Gender *</legend>
                    <input id="genderm" type="radio" name="gender" value="M" />
                    <label for="genderm">Male</label>
                    <input id="genderf" type="radio" name="gender" value="F" />
                    <label for="genderf">Female</label>     
                </fieldset>
            </div>
        </fieldset> 
        <p>
            <input id="signup" type="submit" value="Submit"/>
        </p>
    </form>
  </body>

</html>

＆＃13;

＆＃13;

＆＃13;