Question

我在使用JS验证表单时遇到了一些问题。

这是HTML，

<form action="xyz.php" method="post">
  <div class="form-group">
    <label class="sr-only" for="id1">Enter ID</label>
    <input type="text" class="form-control" name="id1" id="id1">
  </div>
  <button onclick="validateID()" type="submit" name="submit" class="btn">Submit</button>
</form>

这是JS，

<script>
  function validateID() {
    var id = document.getElementById("id1").value;
    var reg1 = new RegExp("^([0-9][0-9][0-9])$");

    if (!(reg1.test(id))) {
      document.location.href= "http://www.errorpage.com";
    }
  }
</script>

应该针对正则表达式检查提交的表单值，如果验证失败，则必须重定向到错误页面。

但是，它不会重定向。当我使用alert（）代替document.location.href= "http://www.errorpage.com";时，它会起作用。

我感谢任何帮助。

Answer 1

我认为它不是关于location.href。因为按钮类型是提交，表单执行默认操作并将表单提交给xyz.php。这就是为什么当他把警报（）。它的工作原理

更改

＆＃13;

<button onclick="validateID()" type="submit" name="submit" class="btn">Submit</button>

＆＃13;

输入按钮

＆＃13;

<button onclick="validateID()" type="button" name="submit" class="btn">Submit</button>

＆＃13;

或

使用onsubmit =＆＃34; validateID（）＆＃34;在表格标签中，从按钮

上删除点击事件

Answer 2

尝试 window.location.href 或 location.href

详细原因：What is the difference between document.location.href and document.location?

Answer 3

<html>
<head>
<script>
  function validateID() {

    var id = document.getElementById("id1").value;
    var reg1 = new RegExp("^([0-9][0-9][0-9])$");

    if (!(reg1.test(id))) {
        document.location.href = "http://www.errorpage.com";
        return true;
    }else{

          return false;
    }
  }
</script>
</head>
<body>
<form action="xyz.php" method="post" onsubmit="event.preventDefault();  validateID();">
  <div class="form-group">
    <label class="sr-only" for="id1">Enter ID</label>
    <input type="text" class="form-control" name="id1" id="id1">
  </div>
  <button  type="submit" name="submit" class="btn">Submit</button>
</form>
</body>
</html>

验证失败时重定向用户

3 个答案: