Question

附上了一段我的代码。我希望实现最简单的身份验证机制。有两个输入字段，用户和密码。单击发送按钮时，将调用verify（）函数，该函数检查用户名和密码是否都是“ admin ”，如果是保持然后显示 isCorrect div，否则 isWrong 。

谢谢！

的test.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css"/>
        <script src="jquery-1.7.js"></script>
        <script src="test.js"></script>
    </head>

    <body>
        <form class="header">
            Username: <input type="textbox" tabindex="1" id="username"/>
            Password: <input type="password" tabindex="2" id="password"/>
            <input type="submit" value="Send" tabindex="3" id="send" onclick="verify()"/>
        </form>

        <div id="isCorrect">correct!</div>
        <div id="isWrong">wrong!</div>
    </body>
</html>

test.css

#isCorrect { display: none; }
#isWrong { display: none; }

test.js

function verify() {
    var username = $("#username").val();
    var password = $("#password").val();
    if (username == "admin" && password == "admin")
        $("#isCorrect").toggle();
    else
        $("#isWrong").toggle();
}

Answer 1

如果页面如果刷新你可以使用jQuery来防止默认事件，那么在输入的情况下女巫应该是提交

jQuery("#send").click(function(e){

    var username = $("#username").val();
    var password = $("#password").val();

    e.preventDefault();
    if (username == "admin" && password == "admin")
        $("#isCorrect").toggle();
    else
        $("#isWrong").toggle();
});

如果您仍想使用验证，则可以执行以下操作：

<input type="submit" value="Send" tabindex="3" id="send"/>

jQuery("#send").click(verify); //this binds the event

function verify(e) {
    e.preventDefault(); //this prevents the submit event
    //your code
}

另外，检查Dunhamzzzs的答案，他对事件是对的，如果你想捕获提交而不是点击输入

Answer 2

首先，正如@Dunhamzzz指出的那样，这是非常不安全，因为您的用户名和密码在浏览器中可见....

如果您想让用户在屏幕上查看您需要return false;到verify（）函数末尾的消息：

function verify() {
    $("#isCorrect").hide();
    $("#isWrong").hide();
    var username = $("#username").val();
    var password = $("#password").val();
    if (username == "admin" && password == "admin")
        $("#isCorrect").show();
    else
        $("#isWrong").show();
    return false;
}

然后更新你的html：

<input type="submit" value="Send" tabindex="3" id="send" onclick="return verify()"/>

工作示例：http://jsfiddle.net/manseuk/ZyN93/

Answer 3

尼科斯的答案有正确的逻辑，但不要在提交按钮中添加点击事件，因为当用户在表单上按Enter键时不会触发（此外，你不应该这样做）在jQuery中，你可以像这样在整个表单中添加一个提交处理程序：

$('form.header').submit(function(e) {
    e.preventDefault(); // This stops the form actually submitting

   var username = $("#username").val();
   var password = $("#password").val();

    if (username == "admin" && password == "admin")
        $("#isCorrect").toggle();
    else
        $("#isWrong").toggle();
});

JQuery toggle（）和自动刷新/渲染

3 个答案: