Question

我是Web开发的新手，我正在尝试编写代码来验证用户名和密码组合。 http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php是运行检查的链接，http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list.php是可接受条目的列表。我能够使用用户名和密码进行硬编码，这似乎工作得很好，我的问题只是＆＃34;如何连接此输入，检查服务器内部是否有可接受的登录信息。＆＃34;感谢您的帮助！

这是我的表格：

<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";
}

而不是使用静态列表。

Answer 2

这里有两个选项 -

您可以使用ASP.Net / PHP等服务器端语言，并可以在表单中添加操作属性，

然后提交给validate.php，将任何带有name标签的控件传递给validate.php页面。

<form name='something' method='POST' action='validate.php'>
<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>

我建议你为此学习服务器端语言，我不打算发布代码，我会留给你学习。

OR

您可以使用JQuery（我也不会这样做，但在我看来更容易）向服务器调用AJAX请求进行验证。

http://api.jquery.com/jquery.ajax/

关于如何使用JQuery和AJAX调用某些服务器端代码的好例子。

Answer 3

检查传入js没有意义，因为用户可以看到js代码。使用PHP和AJAX。

要列出的用户名和密码验证

3 个答案: