表单上的 JavaScript 验证问题

Question

我正在尝试使用 JavaScript 验证登录表单的某些输入。据我所知，脚本中的所有内容都是正确的，但它不起作用。我确定这是我错过的一件小事，任何帮助将不胜感激。

注意：我无法使用外部库。

JavaScript 代码：

<script>
    function validateForm() {
        var x = document.forms["login"]["username"].value;
        var y = document.forms["login"]["password"].value;
        if (isNaN(x)) && (y === "") {
            alert("Username must be numerical, and password must be entered!");
            return false;
        } else if (isNaN(x)) && (y !== "") {
            alert("Username must be numerical!");
            return false;
        } else if (Number.isInteger(x) == true) && (y === "") {
            alert("Password must be entered!");
            return false;
        } else {
            return true;
        }
    }
</script>

HTML 代码：

<form name="login" method="get">
    <input type="text" placeholder="Customer ID" name="username">
    <input type="password" placeholder="Password" name="password">
    <input type="submit" onclick="return validateForm()" value="Log In" name="button">
    <?php if (isset($errormessage)) { echo $errormessage; } ?>
</form>

（我是网络开发新手，请不要过多判断：p）

Answer 1

除了其他答案：

这一行：var x = document.forms["login"]["username"].value; 将用户名的值存储为一个字符串，即使输入了一个数值。现在我邀请您测试以下代码行：

Number.isInteger('12')

它将返回 false。

其中一个可能的解决方案是在使用它之前在 x 上使用 parseInt ：

var x = parseInt(document.forms["login"]["username"].value);

如果给定一个不可解析的非 int 值，它仍然会返回 NaN，如果该值是可解析的，则将其转换为 int。

旁注：

parseInt('a') == NaN
parseInt('12') == 12
parseInt('12a') == 12

Answer 2

if 语句的条件周围缺少括号。

    function validateForm() {
        var x = document.forms["login"]["username"].value;
        var y = document.forms["login"]["password"].value;
        if ((isNaN(x)) && (y === "")) {
            alert("Username must be numerical, and password must be entered!");
            return false;
        } else if ((isNaN(x)) && (y !== "")) {
            alert("Username must be numerical!");
            return false;
        } else if ((Number.isInteger(x) == true) && (y === "")) {
            alert("Password must be entered!");
            return false;
        } else {
            return true;
        }
    }

<form name="login" method="get">
    <input type="text" placeholder="Customer ID" name="username">
    <input type="password" placeholder="Password" name="password">
    <input type="submit" onclick="return validateForm()" value="Log In" name="button">
    <?php if (isset($errormessage)) { echo $errormessage; } ?>
</form>

如果您有任何问题，请告诉我。

Answer 3

<script>
   function validateForm() {
   var x = document.forms["login"]["username"].value;
   var y = document.forms["login"]["password"].value;
   if ( (isNaN(x)) && (y === "")) {
        alert("Username must be numerical, and password must be entered!");
        return false;
    } else if ( (isNaN(x)) && (y !== "")) {
        alert("Username must be numerical!");
        return false;
    } else if ( (Number.isInteger(x) == true) && (y === "")) {
        alert("Password must be entered!");
        return false;
    } else {
        return true;
    }
}

您在脚本中遗漏了一些括号，请使用此代码

Answer 4

你的 if 语句中有额外的括号：

if (isNaN(x))<- this is closing the conditional and is not required

删除它，它应该可以工作：

if (isNaN(x) && y === "") {

else 分支也有这个问题，整个if 应该是这样的：

if (isNaN(x) && y === "") {
    alert("Username must be numerical, and password must be entered!");
    return false;
} else if (isNaN(x) && y !== "") {
    alert("Username must be numerical!");
    return false;
} else if (Number.isInteger(x) == true && y === "") {
    alert("Password must be entered!");
    return false;
} else {
    return true;
}

另外，isNan 函数可以从Number 使用（就像isInteger）而不是全局，这将使脚本更加一致:)