为什么我的表单即使返回false仍仍在提交？

Question

我编写了这段代码，使用提交按钮提交了带有名称和年龄字段的表单。 我的代码如下所示：

 function checkForm() { var name = document.forms["form"]["name"].value; var age = document.forms["form"]["age"].value; var regName = /^[AZ]*[az]{3,} $/; var regAge = /^[\\d.*]{1,} $/; if (name == regName && age == regAge) { return true; } else { return false; } } 

 <form name="form" action="register.php" method="POST" onsubmit="return checkForm()"> <p>Name:</p> <input type="text" name="name" id="name"> <br> <p>Age:</p> <input type="text" name="age" id="age"> <br> <br> <button type="submit" name="submit">Submit</button> </form> 

名称应仅使用大写和小写字母，并且年龄必须为数字和正整数。

据说，当我输入错误的数据时，表单不应返回false，而应返回true，然后将我发送到register.php。 我的代码有问题吗？

Answer 1

尝试添加event.preventDefault（）; 当数据无效时。

function checkForm(event){
    var name = document.forms["form"]["name"].value;
    var age = document.forms["form"]["age"].value;
    var regName = /^[A-Z]*[a-z]{3,} $/;
    var regAge = /^[\d.*]{1,} $/;

    if (name == regName && age == regAge){
        return true;

    } else{
   event.preventDefault();
        return false;
    }
}

Answer 2

尝试使用pattern.test('stringMethod')评估正则表达式

function checkForm(event){
    var name = document.forms["form"]["name"].value;
    var age = document.forms["form"]["age"].value;
    var regName = /^[A-Z]*[a-z]{3,} $/;
    var regAge = /^[\d.*]{1,} $/;
    if (regName.test(name) && regAge.test(age)){
        return true;
    } else{
   event.preventDefault();
        return false;
    }
}

Answer 3

表单的默认行为类似于，如果您在提交时调用一个函数，它将被提交。 因此，您可以在按钮提交时调用该函数。

<button type="submit" name="submit" onsubmit="return checkForm()">Submit</button>