为什么使用form表单登录,什么都不输入直接点击登录,页面会被刷新导致错误信息未显示?

咿呀咿呀哟
  • 16

第一次做form表单的登录,想在action中不写地址,直接js中跳转,但是这样的话好像不管输入正确与否,点击登录页面就会再次刷新,错误提醒无法显示出来。以下是我的代码:

1、html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="../img/common/logo.png"/>
    <script type="text/javascript" src="js/lib/SHA1.js"></script>
    <script src="js/lib/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/login_bak.js"></script>
</head>
<body>
<div id="main">
    <div id="login_content">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="username">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default" onclick="login()">Sign in</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

2、js部分


function login() {
  var uid = $('#username').val();
  var pwd = $('#password').val();
  document.getElementById("msg").innerText = '';
  if (uid == '' || pwd == '') {
    document.getElementById("msg").innerText = '用户名和密码不能为空'
  } else {
    //获取数据库用户名密码
    var sql = {
      select: "SELECT pwd From lgbdz_system_user_acl WHERE uid='".concat(uid.trim(), "'") //查询用户名的密码
    }
    new Promise(function (resolve) {
      $.post('/data', sql, function (data) {
        if (data != 0) {
          var sqlData = JSON.parse(data)[0];
          resolve(sqlData);
        } else {
          document.getElementById("msg").innerText = '用户名输入错误'
        }
      })
    }).then(function (sqlData) {
      if (pwd !== sqlData[0]['pwd']) {
        document.getElementById("msg").innerText = '密码输入错误'
      }
      if (pwd == sqlData[0]['pwd']) {
        var sha = sha1(sqlData[0]['pwd']);
        var user = {
          'uid': uid,
          'pwd': sha
        }
        console.log(user);
        var sessionStorage = window.sessionStorage;
        sessionStorage.setItem("user", JSON.stringify(user));
        window.location.href = '/'
      }
    })
  }
}

实在不懂为什么呢,我试过在form中action指定跳转地址,但是这样无论登录成功与否都会跳转,目前项目中我先换成table做的,没有问题。但我自己还是希望能够解决这个问题,弄懂其中原理,希望大家踊跃发言,谢谢哈~

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本(请勿用截图)

你期待的结果是什么?实际看到的错误信息又是什么?

回复
阅读 548
2 个回答

由于你的 button 指定了 type="submit",所以会触发表单默认的 onsubmit 行为,将type 改为 button 就行了

<form class="form-horizontal" onsubmit='return false'></form>

如果你button的type="submit" 就会触发form onsubmit 事件 返回个false 或者把按钮的type属性修改一下就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏