12

我正在为一个网站做一个简单的 javascript 登录，并想出了这个：

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

...除了一件事外，它可以工作：按 Enter 提交表单不会做任何事情。我有一种感觉，这是因为我使用了“onclick”，但我不确定用什么来代替。想法？

好的，是的，所以我很清楚这在安全方面是多么脆弱。这不是什么特别绝密的事情，所以这不是一个大问题，但是如果你们可以用代码详细说明你们的想法，我很想看看你们的想法。我列出的代码实际上就是我目前正在使用的所有代码，因此如果需要，我可以从头开始。

4

7 回答 7

33

这里同时讨论了几个主题。让我们试着澄清一下。

1. 您最关心的问题：

（为什么按ENTER时输入按钮不起作用？）

使用提交按钮类型。

<input type="submit".../>

..代替

<input type="button".../>

您的问题与使用onclick属性没有任何关系。相反，您没有得到您想要的行为，因为您使用了按钮输入类型，它的行为方式与提交按钮的行为方式不同。

在 HTML 和 XHTML 中，某些元素有默认行为。表单上的输入按钮通常属于“提交”类型。在大多数浏览器中，默认情况下，当从同一表单元素中的焦点元素按下 ENTER 时，会触发“提交”按钮。“按钮”输入类型没有。如果您想利用该默认行为，可以将输入类型更改为“提交”。

例如：

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. 安全问题：

@Ady提到了一个安全问题。在 javascript 中进行登录有一大堆安全问题。这些可能超出了这个问题的范围，特别是因为您已经表示您并不特别担心它，并且您的登录方法实际上只是将 location.href 设置为新的 html 页面（表明您可能没有任何真正的安全机制）。

如果有人直接对这些问题感兴趣，这里是关于 SO相关主题的链接，而不是繁琐的。

3. 其他问题：

这是您的代码的快速清理，它仅遵循一些最佳实践。它没有解决人们提到的安全问题。相反，我包含它只是为了说明一些健康的习惯。如果您对我为什么以某种方式写东西有具体问题，请随时提问。此外，浏览相关主题的堆栈（因为您的问题可能已经在这里讨论过）。

主要需要注意的是从 HTML 中删除了事件属性（onclick=""、onsubmit="" 或 onkeypress=""）。这些属于 javascript，并且将 javascript 事件排除在标记之外被认为是最佳实践。 

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>
于 2008-10-27T04:35:37.930 回答
1

代替 <input type="button">，使用 <input type="submit">。您可以将验证代码放在表单 onsubmit 处理程序中：

<form id="loginwindow" onsubmit="validate(...)">

于 2008-10-27T04:39:45.487 回答
1

这是因为它不是表单提交，所以当用户按下回车时不会触发任何事件。上述表单提交选项的替代方法是为输入表单添加一个事件侦听器，以检测用户是否按下回车。

<input type="password" name="text1" onkeypress="detectKey(event)">
于 2008-10-27T04:44:42.153 回答
1

将脚本直接放在您的 html 文档中。使用您要使用的功能更改 onclick 值。html 中的脚本将告诉表单在用户点击回车或按下提交按钮时提交。

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>
于 2017-05-15T12:22:15.623 回答
0

我的想法 = 巨大的安全漏洞。任何人都可以查看用户名和密码。

与您的问题更相关：-您发生了两个事件。

  1. 用户点击按钮。
  2. 用户按下回车。

enter 键提交表单，但不单击按钮。

通过将代码放在表单的 onsubmit 方法中，代码将在表单提交时运行。通过更改要提交的按钮的输入类型，按钮将以与输入按钮相同的方式提交表单。

然后，您的代码将为这两个事件运行。

于 2008-10-27T04:35:14.590 回答
0

也许你可以试试这个：

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

正如其他人指出的那样，您的解决方案还有其他问题。但这应该回答你的问题。

于 2008-10-27T04:40:39.680 回答
0

当然这太不安全了，因为每个人都可以在一秒钟内破解它......

-- 只有伪安全的方式来做 js-logins 是这样的：

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>
于 2008-10-27T04:49:27.323 回答