jQuery: check username availability
I am using jQuery to check username availability when registering on my web application. For some reason, rather then to keep user data in database, I store the registered users's ID and password in a flat file accounts.txt. The format is like this:
joe:frt25t5546g
john:sdfsdggUpdate
Thanks to the help of guys here, I finally got a clue on it, I followed the method on http://roshanbh.com.np/2008/04/check-username-available-ajax-php-jquery.html.
Here is part of my registration.html
$(document).ready(function()
{
$("#uname").blur(function(){
$.post("usernameCheck.php",{user_name:$(this).val()},function(data)
{
if(data=="no"){
$(this).html("This username already exists");
}
else{
$(this).html("Username is available!");
}
});
});
}
<body>
<form name="form" method="post" action="" />
<table>
<tr><td>Username: </td>
<td><input type="text" name="uname" id="uname" /></td></tr>
</table>
<input type="submit" name="su开发者_如何学编程bmit" value="Register" />
</form>
</body>
I am quite new to jQuery, ajax sort of things...Thanks!
Don't do this on clientside. Your passwords, even encrypted, should never leave your server. Make a serverside script that will accept a username and return a boolean, then call it through AJAX.
Also, to answer your direct question, look up JavaScript methods String.split
and String.match
.
It's recommended NOT to use this code, but just for example you can do it like this
$(function(){
$parsed={};
$.ajax({
url: 'userpass.txt',
complete: function(data, textStatus, jqXHR) {
// get all the data and separate it by rows
$.each(data.responseText.split("\n"), function(i,v){
// split the rows by colon sign
$parsed[v.split(":")[0]] = v.split(":")[1];
});
}
});
// when the user is typing the username
$('input#username').keyup(function(){
v = $(this).val();
// check if the username exists
if ($parsed[v]) {
alert("user exists");
}
});
});
Working example: http://jsfiddle.net/peeter/RszUy/
I hope this example will illustrate how unsafe it is to actually do this.
HTML:
<form id="secureForm">
<input type="text" id="username"/>
<input type="password" id="password"/>
<input type="submit" id="submit" value="Submit"/>
<div id="results"></div>
</form>
CSS:
#results {
margin-top: 10px;
}
Javascript:
$(document).ready(function() {
$("#username").keyup(function(e) {
totallySecureWayToCheckIfUserExists();
});
});
function totallySecureWayToCheckIfUserExists() {
$.post("/echo/html/", {
html: "joe:frt25t5546g\njohn:sdfsdgg\nthis:isstupid"
}, function(data) {
var users = data.split("\n");
$("#results").html("");
$.each(users, function(index, row) {
var username = row.split(":")[0];
var password = row.split(":")[1];
if(username == $("#username").val()) {
$("#results").html("").append("<p>"+"Result found! Username '" + username +"' with the password '"+password+"' exists, you cannot use this username sorry!</p>");
return false;
}
else {
$("#results").append("<p>"+"Doesn't match the username: " + username +" (password="+password+")</p>");
}
});
});
}
精彩评论