Question

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

function checkForm() {
  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 {
    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>

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

3 个答案: