遇到用戶注冊等情況時，如果等用戶輸入所有信息，點擊注冊按鈕提交後，再驗證輸入是否正確，體驗很不好，而且很浪費用戶的時間，增加注冊成本，這裡提供一個例子，演示了怎麼使用ajax進行單步驗證，使用thinkphp 3.2框架，環境WAMPServer 2.4，版本PHP 5.4.16+ Apache 2.4.4+ MySql 5.6.12
一、數據庫設計：
數據庫名 thinkphp
表名 tp_user 其中tp_是表前綴，可以在config.php中定義，操作表的時候只用user就行
CREATE TABLE IF NOT EXISTS `tp_user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(30) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
二、頁面設計
三、HTML部分
view/Index/index.html
四、thinkphp自動驗證
protected $_validate=array(
array('username','require','用戶名不能為空!'),
array('username','','用戶名已經存在',0,'unique',1),
array('username','/^[a-zA-Z][a-zA-Z0-9_]{1,19}$/','用戶名不合法！'),
array('email','require','郵箱不能為空!'),
array('email','email','郵箱格式不正確!'),
array('email','','該郵箱已經注冊過！',0,'unique',1),
);
protected $_auto = array(
array('password', 'md5', 1, 'function'), // 對password字段在新增的時候使md5函數處理
);
五、 使用ajax
用戶輸入用戶名後，當輸入框失去焦點時會觸發blur事件，可以在這時候驗證用戶名輸入是否正確
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行異步請求
參數：
alue 的鍵值對形式表示。
$('#username').blur(
function() {
var username = $(this).val();
$.post(index.php/Home/Index/checkName, {
'username' : username//前一個username需要跟UserModel對應，即跟數據庫字段對應
}, function(data) {
if (data == 0) {
error['username'] = 0;
$('#tooltip1').attr('class',
'tooltip-info visible-inline success');
} else {
error['username'] = 1;
$('#tooltip1').attr('class',
'tooltip-info visible-inline error');
$('#mess1').html(data);
}
})
return false;
});
密碼，重復密碼，郵箱驗證類似
驗證郵箱的時候需要注意，如果用戶輸入郵箱後，立刻點擊注冊按鈕，這時候會同時執行注冊按鈕的click事件，郵箱輸入框的blur事件，由於郵箱驗證是$.post是異步的，post還沒有執行完，click事件裡error['email']=1，不會執行$('#submit1').submit();所以這時候再設置一個標志error['submit'] = 0;0表示點擊過注冊按鈕，默認為1，在郵箱blur回調函數中判斷error['submit'] 是否等於0，即判斷是否點擊過，如果點擊過，提交表單，如果沒點擊過，只需要驗證郵箱。
用戶輸入郵箱後，鼠標在屏幕上其他地方點擊，只執行blur，跟用戶名，密碼情況一樣。
六、服務器處理
public function checkName() {
$user = D ( 'user' );
if (! $user->create ()) {
exit ( $user->getError () );
} else {
echo 0;//這是回傳給$.post的數據，對應上面的data
}
}
以上是單步驗證用戶名的方法，下面來看怎麼把所有數據提交給服務器
七、 把所有數據提交給服務器
通過上面的html代碼注意到這裡用了一個form，以post方式提交表單，action指向服務器能處理的地址
點擊注冊按鈕時，先判斷所有輸入是否正確，如果正確，才執行提交表單
$('#submit1').click(function() {
if ($('#username').val() == '') {
$('#tooltip1').attr('class', 'tooltip-info visible-inline error');
$('#mess1').html(用戶名不能為空!);
}
if ($('#password').val() == '') {
$('#tooltip2').attr('class', 'tooltip-info visible-inline error');
$('#mess2').html(密碼不能為空!);
}
if ($('#repassword').val() == '') {
$('#tooltip22').attr('class', 'tooltip-info visible-inline error');
$('#mess22').html(確認密碼不能為空!);
}
if ($('#email').val() == '') {
$('#tooltip3').attr('class', 'tooltip-info visible-inline error');
$('#mess3').html(郵箱不能為空!);
}
if (error['username'] == 1) {
var scroll_offset = $(#tooltip1).offset(); // 如果用戶名驗證失敗，屏幕會滾動到用戶名的位置，讓用戶重新輸入
$(body,html).animate({
scrollTop : scroll_offset.top
// 讓body的scrollTop等於pos的top，就實現了滾動
}, 0);
return false;
} else if (error['password'] == 1) {
return false;
} else if (error['email'] == 1) {
error['submit'] = 0;
return true;
} else {
$('#submit1').submit();
return true;
}
});
public function register() {
$user = D ( 'user' );
if (! $user->create ()) {
dump ( $user->getError () );
}
$uid = $user->add ();
if ($uid) {
$_SESSION ['username'] = $_POST ['username'];
$this->redirect ( 'Home/index' );
} else {
$this->error ( 注冊失敗！ );
}
}
八、config.php配置
'mysql', // 數據庫類型
'DB_HOST' => '127.0.0.1', // 服務器地址
'DB_NAME' => 'thinkphp', // 數據庫名
'DB_USER' => 'root', // 用戶名
'DB_PWD' => '123', // 密碼
'DB_PORT' => '3306', // 端口
'DB_PREFIX' => 'tp_', // 數據庫表前綴
);
