为什么返回了false还是会提交？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>康健食疗诊所VIP用户登陆</title>
</head>
<body>

<br>
<br>
<form name="loginForm" method="get" action="testForm2.php" onsubmit="checkUser()">
   用户名：<input type="text" name="loginName"><br><br>
    密码： &nbsp  <input type="password" name="userPassword"><br><br>

    <input type="button" value="注册">
    <input type="submit" value="登陆" >
</form>
<script>
    function checkUser() {
        var userName=document.getElementsByName('loginName');
        var passWord=document.getElementsByName('userPassword');
        if (userName.value==null || passWord.value==null){
            alert('请先填写内容');
            return false;
        }
    }
</script>
</body>
</html>

能够弹出窗口提示需要填写，但是关闭窗口后仍然会提交并切换到ACTION的页面

第一个问题
onsubmit="checkUser()" 改成
onsubmit="return checkUser()"
少了个return

第二个问题
var userName =document.getElementsByName('loginName') 获取的 是对象数组，直接获取value获取不到
改成
var userName =document.getElementsByName('loginName')[0];
var passWord=document.getElementsByName('userPassword')[0];

第三个问题
判断为空应该是if(userName.value==""||passWord.value==""){}

1.onsubmit事件需要接收返回值
2.getElementsByName根据name获取得到的是 NodeList 不是单独document对象
改如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>康健食疗诊所VIP用户登陆</title>
    </head>
    <body>
        <br>
        <br>
        <form name="loginForm" method="get" action="testForm2.php" onsubmit="return checkUser()">
            用户名：<input type="text" name="loginName"><br><br>
            密码： &nbsp <input type="password" name="userPassword"><br><br>
            <input type="button" value="注册">
            <input type="submit" value="登陆">
        </form>
        <script>
            function checkUser() {
                var userName = document.getElementsByName('loginName')[0];
                var passWord = document.getElementsByName('userPassword')[0];
                if (!userName.value || !passWord.value) {
                    alert('请先填写内容');
                    return false;
                }
            }
        </script>
    </body>
</html>

type由submit改成button 再加个onclick事件调用 提交方法
不过建议改成ajax会更友好


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>康健食疗诊所VIP用户登陆</title>
</head>
<body>

<br>
<br>
<form name="loginForm" method="get" action="testForm2.php" onsubmit=“return checkUser()”>
   用户名：<input type="text" name="loginName"><br><br>
    密码： &nbsp  <input type="password" name="userPassword"><br><br>

    <input type="button" value="注册">
    <input type="submit" value="登陆" >
</form>
<script>
    function checkUser() {
        var userName=document.getElementsByName('loginName')[0];
        var passWord=document.getElementsByName('userPassword')[0];
        if (userName.value==“”|| passWord.value==“”){
            alert('请先填写内容');
            return false;
        }
    }
</script>
</body>
</html>

照专家的三点意见修改了，还是不行？是否没有理解到？

非常感谢！您修改过后，果然可以运行了。能方便告诉我哪里的引号错了么？因为我对phpstorm不是很熟悉，这样我看看究竟ide会有怎样的提示？