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>");
}
});
});
}
加载中,请稍侯......
精彩评论