javascript - 用户名和密码验证列表

Question

我对网络开发非常陌生，正在尝试编写代码来验证用户名和密码组合。 http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php是运行检查的链接，http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list.php是可接受条目的列表。我能够对用户名和密码进行硬编码，这似乎工作正常，我的问题只是“如何连接此输入，以检查服务器内部是否有可接受的登录”。提前感谢您的帮助!

这是我的表格:

<form id = "formLogin" method = "post" name = "myform">
<label>User Name: </label>
<input type = "text" name = "username" id = "username" />
<label>Password: </label>
<input type = "password" name = "password" id = "password">
<input type = "button" value = "Login" id = "submit" onclick = "validate()">
<input type = "reset" value = "Reset">
</form>

到目前为止，这是我的 JavaScript:

function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == ""){
    alert("Please enter a User Name")
    formLogin.username.focus()
    return false
}
if(password == ""){
    alert("Please enter a Password")
    formLogin.password.focus()
    return false
}
if( username == "Test" && password == "test#123"){
    alert("Login successfully");
    window.location = "gameboard.html";
    return false;
}
else{
 alert("Login failed - Please enter correct Username and Password")   
}
}

Answer 1

尝试查看jQuery's AJAX function 。提交登录表单后，将用户名和密码组合发送至 http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php如下。

<form id="formLogin" method="post" name="myform">
   <label>User Name:</label>
   <input type="text" name="username" id="username">

   <label>Password:</label>
   <input type="password" name="password" id="password">

   <input type="submit" value="Login" id="submit">
   <input type="reset" value="Reset">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#formLogin').submit(function(e) {
    e.preventDefault();
    var username = $('input#username').val();
    var password = $('input#password').val();

    if(password == ""){
       alert("Please enter a Password");
       $('#password').focus();
       return false;
    }

    if(username == ""){
       alert("Please enter a Username");
       $('#username').focus();
       return false;
    }

    if(username != '' && password != '') {
        $.ajax({
            url: 'http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php',
            type: 'POST',
            data: {
                username: username,
                password: password
            },
            success: function(data) {
                console.log(data);
                // It looks like the page that handles the form returns JSON
                // Parse the JSON
                var obj = JSON.parse(data);

                if(obj.result != 'invalid') {
                    alert("Login succeeded");
                    // You should redirect the user too
                    window.location = 'http://redirecturl.com';
                }                    
            }
        });
    } 
}); 
</script>

这有效地验证了您的表单提交。我更喜欢使用 jQuery 库而不是原始 JS。你也应该研究一下。

还值得注意的是，表单也必须始终在服务器端进行验证。因为客户端总是可以在浏览器中禁用 JavaScript 来绕过您的前端验证。正如对您的问题发表评论的人所提到的，您的后端验证方法非常不安全。不应存储密码的原始值。相反，最好使用 sha1 hash这样，如果不需要的用户以某种方式侵入您的数据库，他/她就不会拥有存储在其中的所有密码。

此外，如果您执行类似的操作，用户名/密码组合验证在后端会更加顺利

// Connect to the DB
$con = mysqli_connect('localhost', 'user', 'pass', 'db'); 
// Escape the form values or user prepared statements
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);
$sql = "SELECT * FROM users WHERE username = '".$username." AND password = '".$password."'";
$result = mysqli_query($con, $sql);
$count = mysqli_num_rows($result);

if($count == 1) {
    echo "Success";
} else {
    echo "Fail";
}

而不是使用静态列表。