当用户点击Enter时,Javascript登录表单不会提交

Question

我正在为一个网站进行简单的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>

...除了一件事以外的工作:点击输入提交表格不做任何事情.我有一种感觉,因为我使用过"onclick",但我不确定要使用什么.思考？

---

好的,所以我很清楚这是多么脆弱这是安全方面的.这不是什么特别的绝密,所以这不是一个大问题,但如果你们能用代码详细阐述你的想法,我很乐意看到你的想法.我列出的代码实际上就是我正在使用的所有代码,所以如果需要,我可以从头开始.

Answer 1

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

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的相关主题的链接,而不是扼杀它.

• 有什么方法可以做客户端的用户验证吗？
• 加密Ajax调用jQuery中的身份验证

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>