// Database connection values define('DB_HOST', 'localhost'); define('DB_USERNAME', 'YOUR_USERNAME'); define('DB_PASSWORD', 'YOUR_PASSWORD'); define('DB_NAME', 'YOUR_DB_NAME'); if(isset($_POST['username'], $_POST['password'])) { extract($_POST); $db = mysql_connect(DB_HOST, DB_USERNAME, DB_PASSWORD); mysql_select_db(DB_NAME, $db); if($action == 'register' && isset($_POST['firstname'], $_POST['lastname'], $_POST['email'])) { // Verify that the username is unique $query = mysql_query("select count(id) from ibm_user_auth where username='$username'"); $result = mysql_fetch_row($query); if ( $result[0] > 0 ) { $out = "<error><suggestions>"; $out .= "<suggestion>" . $firstname . $lastname . "</suggestion>"; $out .= "<suggestion>" . $firstname . "_" . $lastname . "</suggestion>"; $out .= "<suggestion>" . $lastname . $firstname . "</suggestion>"; $out .= "<suggestion>" . $lastname . "_" . $firstname . "</suggestion>"; $out .= "</suggestions></result>"; die($out); } // Validate email if( !preg_match("^[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%& '\*\+/=\?\^_`\{\|}~-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,})$^", $_POST['email']) ) { die("<error />"); } mysql_query("insert into ibm_user_auth (username, password, firstname, lastname, email) VALUES ('$username', MD5('$password'), '$firstname', '$lastname', '$email')"); die("<success />"); } else if($action == 'login') { $query = mysql_query("select count(id) from ibm_user_auth where username='$username' and password=md5('$password')"); $result = mysql_fetch_row($query); if($result[0] == 1) { session_start(); $_SESSION['username'] = $username; die("<success />"); } else die("<error />"); } } ?>

注意，在注册过程中如果用户名已存在，您可以创建一个包含各种提交用户名组合数据（构成提示用户名）的 XML 结构。您甚至可以进一步在返回之前确认用户名提示不在数据库中。

清单 10 展示了您如何使用 jQuery 显示提示信息。

$(document).ready(function() { $("#register, #login").click(function(e) { var name = ($(event.target).attr('id') == 'register') ? 'Registration' : 'Login'; $('#message').slideUp('fast'); $.post('service.php', $('#mainform').serialize() +'&action='+ $(event.target).attr('id'), function(data) { var code = $(data)[0].nodeName.toLowerCase(); $('#message').removeClass('error'); $('#message').removeClass('success'); $('#message').addClass(code); if(code == 'success') { $('#message').html(name + ' was successful.'); } else if(code == 'error') { var id = parseInt($(data).attr('id')); switch(id) { case 0: $('#message').html('This user name has already been taken. Try some of these suggestions:

'); form = $(document.createElement('form')); $(data).find('suggestions > suggestion').each(function(idx, el) { radio = $(document.createElement('input')); radio.attr({type: 'radio', name: 'suggested', id: 'suggested_'+idx, value: el.innerHTML}); lbl = $(document.createElement('label')); lbl.attr('for', 'suggested_'+idx); lbl.html(el.innerHTML); form.append(radio); form.append(lbl); form.append('
'); }); $('#message').append(form); $('#message form input[type="radio"]').click(function() { $('#username').val($(this).attr('value')); }); break; case 1: $('#message').html('The e-mail entered is invalid.'); break; case 2: $('#message').html('The user name or password you entered was invalid.'); break; default: $('#message').html('An error occurred, please try again.'); } } $('#message').slideDown('fast'); }); return e.preventDefault(); }); });

现在，如果返回一个错误，您就可以检查错误 ID，而不只是显示对用户没有帮助的默认错误消息。首先，从 XML 结构（从 PHP 返回的）中解析 ID，然后使用一个转换语句直接指向消息或者相关代码。第一个错误 ID 是用于系统中已经存在一个用户名的情况。这就是您访问提示用户名和为用户展示一个选择新用户名的地方。从访问提示节点开始，遍历每一个节点。遍历过程中创建一个单选按钮和一个包含提示的标签，然后将它附加到错误消息，显示给用户。此时，用户可以选择一个提示名，该名称将自动添加到用户名文本框，然后继续注册。

接下来的错误 ID 是用于 email 地址验证的。相关代码只显示一个常见错误消息，通知用户发生了什么错误。您甚至可以添加一行代码来突出显示不正确的字段。下一个是一个常见错误系消息，用于登录失败时。在本例中，代码使用了一个较为模糊的消息，考虑到安全原因，您不能告诉任何人那个字段是不正确的。最后，默认消息和您 中的是一样的，该消息可能永远都不会使用，但是有备无患。

使用 Ajax 进行用户认证日益普及，对于单页面应用程序几乎是必不可少的。它对于提示用户名也大有好处，正如本文所述，因为当页面被提交后，它给用户一个虚幻的希望，只有出现错误时才刷新，这就是说响应更自动化、更用户友好。同时也提供了一个更好用的 web 体验。

描述名字大小

本文样例脚本AjaxUserAuthentication.zip5KB