javascript 要列出的用户名和密码验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29131150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Username and Password validation to list
提问by DEnumber50
I am very new to web development and am attempting to write code to validate username and password combinations. http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.phpis the link to run the check, and http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list.phpis the list of acceptable entries. I am able to hard code in a username and password and that seems to be working fine, my question is simply "How can I hook up this input, to check inside the server for an acceptable login." Thank you for your help in advance!
我对 Web 开发非常陌生，正在尝试编写代码来验证用户名和密码组合。http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php是运行检查的链接，http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list。 php是可接受的条目列表。我能够在用户名和密码中进行硬编码，这似乎工作正常，我的问题只是“我如何连接此输入，以检查服务器内部是否可以接受登录。” 提前谢谢你的帮助！
Here is my form:
这是我的表格：
<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>
Here is my javascript thus far:
到目前为止，这是我的 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")
}
}
回答by Lance
Try looking into jQuery's AJAX function. Upon submission of the login form, send the username and password combo to http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.phpas follows.
尝试查看jQuery 的 AJAX 函数。提交登录表单后，将用户名和密码组合发送到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>
This effectively validates your form submission. I prefer using the jQuery library as opposed to raw JS. You should look into it too.
这有效地验证了您的表单提交。我更喜欢使用 jQuery 库而不是原始 JS。你也应该调查一下。
It's also worth noting that forms must ALWAYS be validated on the server side as well. Because a client could always just disable JavaScript in their browser to bypass your front end validation. As mentioned by someone who commented on your question, your method of backend validation is pretty insecure. Raw values of passwords should never be stored. Rather, it's good to use an sha1 hashof the password so that if an unwanted user somehow hacks into your DB he/she doesn't have all of the passwords stored in there.
还值得注意的是，表单也必须始终在服务器端进行验证。因为客户总是可以在他们的浏览器中禁用 JavaScript 来绕过您的前端验证。正如对您的问题发表评论的人所提到的，您的后端验证方法非常不安全。永远不应存储密码的原始值。相反，最好使用密码的sha1 哈希，这样如果不需要的用户以某种方式侵入您的数据库，他/她就不会将所有密码存储在那里。
Also, username/password combination validation works a lot smoother on the backend if you just do something like
此外，如果您只是执行类似的操作，则用户名/密码组合验证在后端的工作会更加顺畅
// 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";
}
instead of using a static list.
而不是使用静态列表。
回答by Galunid
Checking pass in js doesnt make sense, because user can see js code. Use PHP and AJAX.
检查 js 中的 pass 没有意义，因为用户可以看到 js 代码。使用 PHP 和 AJAX。
回答by DEnumber50
You have two options here -
你在这里有两个选择——
You can use a server side language like ASP.Net / PHP and you can add an action attribute to your form,
你可以使用像 ASP.Net / PHP 这样的服务器端语言，你可以在你的表单中添加一个 action 属性，
This will then submit to the validate.php passing in any controls with a name tag to the validate.php page.
然后，这将提交给validate.php，将带有名称标签的任何控件传递到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>
I would suggest you learn a server side language for this, I'm not going to post the code, I will leave that to you to learn.
我建议你为此学习一种服务器端语言，我不会发布代码，我会把它留给你学习。
OR
或者
- You can use JQuery (Don't have too, but it's easier in my opinion) to call an AJAX request to the server to validate.
- 您可以使用 JQuery（也没有，但我认为它更容易）向服务器调用 AJAX 请求以进行验证。
http://api.jquery.com/jquery.ajax/
http://api.jquery.com/jquery.ajax/
Good examples on how to use JQuery and AJAX to call some server side code.
关于如何使用 JQuery 和 AJAX 调用一些服务器端代码的好例子。
