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;会将username的值存储为字符串，即使输入了数值也是如此。现在我邀请您测试以下代码行：

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）而不是全局使用，这会使脚本更加一致：）

表单上的JavaScript验证有问题

4 个答案: