“未捕获的ReferenceError:未定义失败。”为什么会这样?

时间:2014-03-10 15:55:42

标签: javascript html forms validation error-handling

我正在制作动态注册表单。

已创建表单,并已编写用于验证条目的各种功能。

但是,我为jaildation失败时返回错误消息而创建的变量已在javascript控制台中显示为未定义。

我使用了严格的方法,并在我的全局声明中声明我将在以下代码中定义此变量。

我尝试做的是使用javascript验证表单中的条目,并提示用户在将表单提交到数据库之前更正任何错误。

javascript控制台返回的错误代码如下:Uncaught ReferenceError: fail is not defined. Line 5 validate.js

我已经附加了HTML表单和validation.js文件的代码,我希望我已经以一种可以清楚理解的方式解释了这一点。

以下是validation.html的代码:

<html>
<head>
<title>An Example Form</title>
<style type="text/css">
.signup {
    border: 1px solid #999999;
    font: normal 14px helvetica; color: #444444;
}
</style>
<script language="javascript" type="text/javascript" src="validate.js"></script>
</head>
<body>
<table class="signup" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Signup Form</th>
<form method="post" action="adduser.php" onSubmit="validateForm(this)">
<tr>
    <td>Forename</td>
    <td><input type="text" maxlength="32" name="forename"/></td>
</tr>
<tr>
<td>Surname</td>
<td><input type="text" maxlength="32" name="surname"/></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" maxlength="16" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" maxlength="12" name="password"/></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" maxlength="2" name="age"/></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input type="text" maxlength="64" name="email"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Signup"/></td>
</tr>
</form>
</table>
</body>
</html>

以下是validate.js的代码:

/*jslint browser: true*/
/*global fail:true, alert:true, validateForename, validateSurname, validateUsername, validatePassword, validateAge, validateEmail*/

function validateForm(form) {
    "use strict";
    fail = validateForename(form.forename.value);
    fail += validateSurname(form.surname.value);
    fail += validateUsername(form.username.value);
    fail += validatePassword(form.password.value);
    fail += validateAge(form.age.value);
    fail += validateEmail(form.email.value);
    if (fail === "") {
        return true;
    } else { alert(fail); return false;
           }
}

function validateForename(field) {
    "use strict";
    if (field === "") {
        return "No Forename was entered.\n";
    }
    return "";
}

function validateSurname(field) {
    "use strict";
    if (field === "") {
        return "No Surname was entered.\n";
    }
    return "";
}

function validateUsername(field) {
    "use strict";
    if (field === "") {
        return "No Username was entered.\n";
    } else if (field.length < 5) {
        return "Usernames must be at least 5 characters.\n";
    } else if (/[\^a-zA-Z0-9_\-]/.test(field)) {
        return "Only a-z, A-Z, 0-9, - and _ are allowed in Usernames.\n";
    }
    return "";
}

function validatePassword(field) {
    "use strict";
    if (field === "") {
        return "No Password was entered.\n";
    } else if (field.length < 6) {
        return "Passwords must be at least 6 characters.\n";
    } else if (!/[a-z]/.test(field) || !/[A-Z]/.test(field) || !/[0-9]/.test(field)) {
        return "Passwords require one each of a-z, A-Z and 0-9.\n";
    }
    return "";
}

function validateAge(field) {
    "use strict";
    if (isNaN(field)) {
        return "No Age was entered.\n";
    } else if (field < 18 || field > 99) {
        return "Age must be between 18 and 99.\n";
    }
    return "";
}

function validateEmail(field) {
    "use strict";
    if (field === "") {
        return "No E-mail was entered.\n";
    } else if (!(((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[\^a-zA-Z0-9.@_\-]/.test(field))) {
        return "The Email address is invalid.\n";
    }
    return "";
}

1 个答案:

答案 0 :(得分:2)

/* global */注释告诉JSLint哪些全局变量已在其他文件中定义 它实际上并没有声明任何内容。

您需要使用var语句实际声明变量 请注意,您实际上需要本地语言,而不是全局语句。

事实上,你根本不应该使用/* global,除非你实际上有另一个文件的全局变量(你没有)。
由于alert()browser: true等浏览器标准方法已为人所知,JSLint已经看到了文件中声明的所有内容。