javascript - Username and Password validation to list - Stack Overflow

admin管理员组

文章数量:1324094

I am very new to web development and am attempting to write code to validate username and password binations. .php is the link to run the check, and .php is 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!

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:

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

I am very new to web development and am attempting to write code to validate username and password binations. http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php is the link to run the check, and http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list.php is 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!

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:

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

• javascript
• html
• ajax

Share Improve this question Follow asked Mar 18, 2015 at 19:33 DEnumber50DEnumber50 24922 gold badges55 silver badges2020 bronze badges 7

• 1 You have to submit the form the server (you form should have an "action" attribute pointing to a url from your server), than the server gets the parameters and validate them. Remove this javascript that checks the inputs. – Christian Benseler Commented Mar 18, 2015 at 19:37
• 1 I think he wants to be able to validate using AJAX – user2836518 Commented Mar 18, 2015 at 19:38
• 4 This is fine for learning, but note that this is not fine for production code. You don't check a password against a list, you never store the password, only a hash and a salt that you check against. – adeneo Commented Mar 18, 2015 at 19:38
• 3 Also note that validation in JavaScript is bad because users can disable JavaScript and there goes your validation. Validation needs to be handled server side. – user2836518 Commented Mar 18, 2015 at 19:39
• 2 I would add to @SythnetP and say that you need to validate on both the client and server side. There is nothing more annoying then filling in a form and leaving something out by mistake and then having to fill it in again when the slip up could have been avoided. – Hayko Koryun Commented Mar 18, 2015 at 19:44

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 4

Try looking into jQuery's AJAX function. Upon submission of the login form, send the username and password bo to http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/check.php as follows.

<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./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.';
                }                    
            }
        });
    } 
}); 
</script>

This effectively validates your form submission. I prefer using the jQuery library as opposed to raw JS. You should look into it too.

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 mented 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 hash of 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.

Also, username/password bination 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.

You have two options here -

1. You can use a server side language like ASP.Net / PHP and you can add an action attribute to your form,

This will then submit to the validate.php passing in any controls with a name tag to the validate.php page.

<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

2. 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.

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

Good examples on how to use JQuery and AJAX to call some server side code.

Checking pass in js doesnt make sense, because user can see js code. Use PHP and AJAX.

本文标签： javascriptUsername and Password validation to listStack Overflow