为什么页面在没有完成表单的情况下被重定向到one in action属性 - why the page is redirecting to the one in action attribute without completion of the form?

我的javascript代码如下:

<script>
    function check(){
        if(document.getElementById("1").value=="") {
            alert("enter 1st value");
            document.getElementById("1").focus();
            return;
        }
        else if(document.getElementById("2").value=="") {
            alert("enter 2nd value");
            document.getElementById("2").focus();
            return;
        }
        return(true);
    }
</script>

我的HTML页面是

<form action="home.php" method="get">
    <input type="text" id="1"></input>
    <input type="text" id="2"></input>
    <input type="text" id="3"></input>
    <input type="submit"onclick="check()"></input>
</form>

当我故意留下一个输入字段为空时，它会聚焦，但会立即重定向到home.php页面，而不会继续输入值

在检查函数中返回void。如果返回false，则停止提交表单。

<script>
    function check(){
        if(document.getElementById("1").value==""){
            alert("enter 1st value");
            document.getElementById("1").focus();
            return false; // <<<< CHECK THIS LINE;
        }
        else if(document.getElementById("2").value==""){
            alert("enter 2nd value");
            document.getElementById("2").focus();
            return false; // <<<< CHECK THIS LINE
        }
        return(true);
    }
</script>

//编辑输入元素是所谓的自关闭标记。正确的语法是:

<input type="text" name="some_name" value="" />

提交按钮应该定义为:

<button type="submit">Button text</button>

您需要return false才能取消提交。

<form action="home.php" method="get">
    <input type="text" id="1"></input>
    <input type="text" id="2"></input>
    <input type="text" id="3"></input>
    <input type="submit"onclick="return check()"></input> <!--Notice the return here-->
</form>
function check()
{
    if(document.getElementById("1").value=="")
    {
        alert("enter 1st value");
        document.getElementById("1").focus();
        return false;//return false instead of void
    }
    else if(document.getElementById("2").value=="")
    {
        alert("enter 2nd value");
        document.getElementById("2").focus();
        return false;//return false instead of void
    }
    return true;
}

JSFiddle

<form action="home.php" method="get" onSubmit="return check();">
<input type="text" id="1"></input>
<input type="text" id="2"></input>
<input type="text" id="3"></input>
<input type="submit"></input>
</form>

您没有检查第三个字段是否为空....如果它是空的，怎么能阻止它呢?

不用做测试

还需要使用return false来防止页面继续，因为它告诉浏览器重置这些操作。

则用return check()代替更改为

  <html>
    <script type="text/javascript">
        function check(){
            if(document.getElementById("1").value==""){
                alert("enter 1st value");
                document.getElementById("1").focus();
                return false;
            }
            else if(document.getElementById("2").value==""){
                alert("enter 2nd value");
                document.getElementById("2").focus();
                return false; 
            }
            else if(document.getElementById("3").value==""){
                 alert("enter 3nd value");
                document.getElementById("3").focus();
                return false; 
            }
            return(true);
        }
    </script>
    <form action="home.php" method="get">
    <input type="text" id="1"></input>
    <input type="text" id="2"></input>
    <input type="text" id="3"></input>
    <input type="submit"onclick="return check()"></input>
    </form>

你需要像下面这样改变你的问题

function check(){
     if(document.getElementById("1").value==""){
        alert("enter 1st value");
        document.getElementById("1").focus();
        return false;
     }
     else if(document.getElementById("2").value==""){
        alert("enter 2nd value");
        document.getElementById("2").focus();
        return false;
     }
return(true);
}

如果你的函数返回false，那么它将阻止表单被发布。在if条件中返回false

<html>
    <head>
        <script>
            function check(){
                if(document.getElementById("1").value==""){
                    alert("enter 1st value");
                    document.getElementById("1").focus();
                    return false;
                }
                else if(document.getElementById("2").value==""){
                    alert("enter 2nd value");
                    document.getElementById("2").focus();
                    return false;
                }
                return true;
            }
       </script>
  </head>
  <body>
      <form action="test.html" method="get">
          <input type="text" id="1"></input>
          <input type="text" id="2"></input>
          <input type="text" id="3"></input>
          <input type="submit"onclick="return check()"></input>
      </form>
  </body>
</html>