Question

这是我的作业，这是我第一次进行表单验证。以下代码分别是我的HTML代码和JavaScript代码。

HTML code：

<html>

<head>
    <script src="validate_form.js" type="text/javascript"></script>
</head>

<body>
    <table>
        <form name="register" method="post" action="">
            <tr><td>First Name:</td><td><input type="text" id="firstname"/></td></tr>
            <tr><td>Surname:</td><td><input type="text" id="surname"/></td></tr>
            <tr><td>Gender:</td><td><input type="text" id="gender"/></td></tr>
            <tr><td>Birthday - Day:</td><td><input type="text" id="dob"/></td></tr>
            <tr><td>Month:</td><td><input type="text" id="month"/></td></tr>
            <tr><td>Year:</td><td><input type="text" id="year"/></td></tr>
            <tr><td>Yahoo ID:</td><td><input type="text" id="yahoo_id"/></td></tr>
            <tr><td>Password:</td><td><input type="text" id="password"/></td></tr>
            <tr><td>Retype password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
            <td><input type="text" id="retype"/></td></tr>
            <tr><td>Question 1:</td><td><input type="text" id="q1"/></td></tr>
            <tr><td>Answer 1:</td><td><input type="text" id="a1"/></td></tr>
            <tr><td>Question 2:</td><td><input type="text" id="q2"/></td></tr>
            <tr><td>Answer 2:</td><td><input type="text" id="a2"/></td></tr>
            <tr><td><input type="submit" value="Confirm" onclick="validate_form ()"/></td><td></td></tr>
        </form>
    </table>
</body>



</html>

JavaScript代码：

function validate_form () 

{
    var first = document.getElementById("firstname").value;  /*get value from the IDs*/
    var sur = document.getElementById("surname").value;
    var sex = document.getElementById("gender").value;
    var day = document.getElementById("dob").value;
    var month = document.getElementById("month").value;
    var year = document.getElementById("year").value;
    var yahooid = document.getElementById("yahoo_id").value;
    var ps = document.getElementById("password").value;
    var retype_ps = document.getElementById("retype").value;
    var ques1 = document.getElementById("q1").value;
    var ans1 = document.getElementById("a1").value;
    var ques2 = document.getElementById("q2").value;
    var ans2 = document.getElementById("a2").value;

    var error = "";                              /*Regular expressions for matching purpose*/
    var val_name = /^[a-zA-Z]{1,}$/;
    var val_dob = /^[0-9]$/;
    var val_yahoo = /^[a-zA-Z0-9_]$/;
    var val_pass = /^[a-zA-Z0-9]$/;

    if (first == null || surname == null || !val_name.test(first)  || !val_name.test(sur) ) /*Validate firstname and surname*/                   

    {
        error += "Invalid firstname and/or surname.\n";
    }

    else if (sex == null) /*Validate gender*/ 

    {
        error += "Invalid gender.\n";
    }

    else if  (day == null || !val_dob.test(day)) /*Validate day of birth*/ 

    {
        error += "Invalid day of birth.\n";
    }

    else if  (month == null) /*Validate month of birth*/ 

    {
        error += "Invalid month of birth.\n";
    }

    else if (year == null || !val_dob.test(year)) /*Validate year of birth*/ 

    {
        error += "Invalid year of birth.\n";
    }

    else if (yahooid == null || !val_yahoo.test(yahooid)) /*Validate Yahoo Id*/ 

    {
        error += "Invalid yahoo Id.\n";
    }

    else if (ps == null || !val_pass.test(ps)) /*Validate password entered*/ 

    {
        error += "Invalid password.\n";
    }

    else if (retype_ps == null || retype_ps != password) /*Validate retype password*/ 

    {
        error += "Retype password is different form password.\n";
    }

    else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null) /*Validate question 1, answer 1, question 2, and answer 2*/ 

    {
        error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
    }

    else if (error == "") /*If no error, display the following message*/ 

    {
        alert("Thank you for your registration.");
    }

    else /*If there are errors, display all the error messages*/

    {
        alert(error);
    }
}

那么，现在问题是代码有什么问题，直到警报窗口没有出现？希望错误可以被彻底指出，因为我还是JavaScript新手。

Answer 1

在连接变量error中的消息时，您必须将最后一个else if作为独立的if执行：

...
else if (ques1 == null || ans1 == null || ques2 == null || ans2 == null)
{
  error += "Invalid Question 1 and/or Answer 1 and/or Question 2 and/or Answer 2.\n";
}

if (error == "") /*If no error, display the following message*/ 
{
  alert("Thank you for your registration.");
}
else /*If there are errors, display all the error messages*/
{
  alert(error);
}

注意：我还注意到在检查密码重复时是否存在错误，您已更改其名称（您将其命名为password而不是ps）。

我在JSFiddle中上传了两个示例： http://fiddle.jshell.net/kcDBU/

这个只有if而不是else if： http://fiddle.jshell.net/kcDBU/1/

Answer 2

在Javascript中，您有一些被视为错误的值：

假，

空值，

未定义，

＆＃39;＆＃39;，

0，

NAN;

您必须考虑到您的价值可能是＆＃34;未定义＆＃34;所以，如果我是你，我会这样做：

if (!first || !surname || !val_name.test(first)  || !val_name.test(sur) )                   
{
    error += "Invalid firstname and/or surname.\n";
}

将你的脚本放在身体标签的末尾。

点击＆＃39;确认＆＃39;

2 个答案: