[CodeIgniter] 利用 jQuery 簡易驗證使用者帳號/Email

好久沒寫相關

CodeIgniter 文章，針對於剛入門 CI 的新手們，此篇教學如何使用 jQuery AJAX 搭配 CI 來驗證使用者帳號及相關資訊，本篇教學帶您如何在 CI 中發出 AJAX request 給伺服器端。請先在網頁 header 自行 include jQuery 檔案，或者可以使用 Google AJAX CDN 方式來讀取，將底下程式碼放到之前：

$(document).ready(function() {
    /* 先停止讀取狀態 */
    $('#Loading').hide();

    /* 填寫好 email 欄位，按下 Tab 會進行讀取 */
    $('#email').blur(function(){
    /* 讀取 email 欄位 */
	var a = $("#email").val();
    /* email 正規語法 */
	var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    /* 簡易驗證 email */
	if(filter.test(a)){
        /* 讀取狀態 */
		$('#Loading').show();
        /* AJAX 比對資料庫 */
		$.post("controller_name/check_email_availablity", {
			email: $('#email').val()
		}, function(response){
            /* 驗證後讀取 reponse 狀態 */
			$('#Loading').hide();
			setTimeout("finishAjax('Loading', '"+escape(response)+"')", 400);
		});
		return false;
	}
});

在 CI Viewer 加入：


  E-mail

CI Controller(控制器)寫法：

function check_email_availablity()
{
	$this->load->model('My_model');
	$email = $this->input->post('email');
	$get_result = $this->My_model->check_email_availablity($email);

	if($get_result )
	echo 'Email already in use. ';
	else
	echo 'Email Available';
}

驗證 email 函式

$this->My_model->check_email_availablity()

function check_email_availablity($email)
{
    $this->db->select('*');
    $this->db->from('project_users');
    $this->db->where('email', $email);
    $query = $this->db->get('');
    if($query->num_rows() > 0)
        return true;
    else
        return false;
}

此函式會從資料庫比對是否有註冊過此 email，如果有的話回傳 true 反之回傳 false，然後在將處理後的狀態回傳給 response，這樣就可以顯示驗證訊息了。另外可以使用

jQuery plugin: Validation 來驗證 js 部份。^^ Ref: Codeigniter Tutorial: How To check Username/Email availablity using jQuery in Codeigniter?

CodeIgniter jQuery

See also