jquery validate one of several passwords

I am trying to build a simple validation script with Jquery but I am having difficulty.

I woul开发者_运维百科d like the entire body of my page apart from a simple user, company, password, 3 field form, to be hidden, until the person types in one of 5 potential passwords, then the body would become unhidden....

this seems quite easy with Jquery although I must be overthinking it. I also would like the passwords which I would just store as variables to be encrypted somehow...

does anyone have any suggestions? cheers

I don't think there's a way to do solid encryption with javascript.

As for the hiding of the body except for the form, I'd use a CSS class on the body tag like this:

body.hidden {
    visibility: hidden;
}

Then have your some descendant styles for you form:

body.hidden form {
    visibility: visible;
}

Add and remove the class="hidden" using jquery when the password is matched.

If you're trying to do that as a method of unlocking some kind of admin functionality then it's very insecure.

Once you've sent the page content to the client, you can hide it, but anyone can just go and show it again.

You can't rely on any client side javascript to limit what a user can see. When it comes down to it, the user can either view the page source (or modify the html themselves) to view the data on the page... regardless of your password protection.

Using jQuery, you can hide the body with $("body").hide(); then listen for key-press events on the $(document). Check the input variable and see if it contains the password you're looking for then show the $("body") and unbind the key-press listener

var input = '';
$("body").hide();
$(document).keypress(function(e) {
    input += String.fromCharCode(e.which); // the character pressed on the the keyboard
    if(input == 'mypassword' || input == 'mypassword-1' || input == 'mypassword-2') { // would suggest using a timer here to reset the "input" var after 1 second or so of someone not typing
        $('body').show();
        $(document).unbind("keypress");
    }
});