更改輸入的背景顏色，如果輸入的值是數據庫

我試圖做的邏輯是有效：更改輸入的背景顏色，如果輸入的值是數據庫

input field starts white (Normal); 
after somebody finish typing, if the email does not exists, the input gets light red; 
if the email exists in the database, the input becomes white again;

我有這樣的代碼：

的index.php

<?php 
include 'my database connection page'; 
include 'page that return me an array with all the emails'; 
?> 
<form method="POST"> 
    <input type="text" name="email" id="email_field" onFocus="changeColorEmail(this)"> 
    <input type="submit"> 
</form>

scripts.js中

function changeColorEmail(which) { 
    which.value = which.value.split(' ').join('') 
     if (which.value == "<? echo $user_data['user_email'] ?>") { 
      which.style.background = '#ffffff'; 
    }else { 
      which.style.background = "#ffebe8"; 
    } 
}

任何想法表示讚賞！

user.php的（包含驗證是否在數據庫中存在的電子郵件功能）

function email_exists($email){ 
    return (mysql_result(mysql_query("SELECT COUNT(user_id) FROM user WHERE user_email = '$email'"), 0) == 1) ? true : false; 
}

來源

2012-05-16 Andre

你錯過了'回聲'在'if'並且還引用了 - >'「<？echo $ user_data ['user_email']？」'' – Engineer

@Engineer謝謝！它說的語法錯誤.. – Andre

sry ..剛剛更新我的帖子！ – Andre

確定，兩種方法可以做到這一點：

硬的方式： 你需要捕獲onblur事件 - 當他們離開郵箱時會觸發onblur事件，您還需要一些AJAX將該值發送回腳本以測試它是否有效。

的jQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"/> 
<script> 

function ValidateEmail(email) 
{ 
    var url = 'validateemail.php?email=' + email; 

    $.getJSON(url, function(data) { 

     var result = jQuery.parseJSON(data); 
     var ctrl = $("#email_field"); 

     if(result.isValid == "true") { 
      ctrl.addClass("valid").removeClass("inValid"); 
     } 
     else { 
      ctrl.addClass("inValid").removeClass("valid"); 
     } 
    }); 
} 

$(document).ready(function() { 

    // change blur to keyup if you want it to validate as they type (bad idea) 
    $("#email_field").bind("blur", function(){ 
     ValidateEmail($(this).val()); 
    }); 
}); 

</script>

（未測試，但應該給你的總體思路）

你需要一個叫做validateemail.php您的服務器上的腳本 - 它應該選擇up電子郵件參數然後返回：

{"isValid": "true"} or {"isValid": "false"}

取決於va電子郵件。

簡單的方法： 兩個CSS類添加到您的網頁（有效和無效） - 當頁面提交，如果電子郵件存在添加有效類輸入控件，如果它不添加無效上課。

CSS：

.valid { color: #ffffff; } 
.invalid { color: #ffebe8; }

PHP：

<input type="text" 
    name="email" 
    id="email_field" 
    onFocus="changeColorEmail(this)" 
    <?echo 'class="'.(email_exists($_GET['email']) ? 'valid': 'inValid').'"';?> 
>

嘗試第二個第一

更新：bug修復

來源

2012-05-16 19:46:30

感謝您的回答，我希望它是更動態..困難的方式可以檢查該人打字的時刻？如果是的話，你能否給我提供一個例子？ – Andre

這是一個更多的技術 - 你需要使用jQuery，除非你真的很喜歡JavaScript –

這是一個不錯的和簡單的解決方案，但我的函數'changeColorEmail（this）'有一個語法錯誤，當我把這個''「<？$ user_data ['user_email']？>''' – Andre

您應該將onFocus更改爲onkeyup，因爲您似乎想要在用戶輸入時驗證電子郵件地址。

從交互設計的角度來看，我會建議您在最終輸入無效時更改顏色爲紅色僅並更改驗證過程的時間。

雖然紅色確實很容易與「錯誤」相關聯，但在給予焦點已被認爲是錯誤的情況下，用戶可能會感到困惑。我會建議您開始驗證onblur事件何時觸發 - 明顯是用戶輸入時 - 和/或用戶仍然擁有焦點但尚未按下某個鍵一段時間。

如果我是用戶，這將是該行爲我覺得最舒服，也是我的行爲將直接解釋爲「我已經進入了一個無效的電子郵件地址」。

來源

2012-05-16 19:53:18 soimon

是的你對！感謝您的提示 – Andre

首先，您的使用案例似乎有一些可用性問題。通常情況下，一個字段在失去焦點之前不會給出驗證結果的指示。這樣，您在沒有完成輸入數據輸入時不會中斷具有驗證錯誤的用戶。

關於如何完成異步驗證，您將使用XMLHttpRequest（例如使用jQuery的$.ajax()）。

在您的用例中，輸入僅在電子郵件地址已存在時纔有效。在這種情況下，您可以創建一個單獨的PHP頁面（例如email_exists.php），根據傳遞的電子郵件是否存在簡單地回顯文本true或false。

E.g.
請求：http://example.com/[email protected]
響應：true或false，因爲它可能是。

最後，在您的輸入中註冊一個「onChange」或「onBlur」事件監聽器。當它觸發時，您將$.ajax()電子郵件地址發送到PHP頁面，並檢查響應。然後，您可以根據響應添加/刪除類，以使輸入元素具有所需的外觀。

來源

2012-05-16 20:03:43 Brendan

我已經有一個函數驗證電子郵件是否存在這個單獨的PHP頁面。但我不知道如何使用'.ajax（）' – Andre

來檢查web_bod的答案。 – Brendan

更改輸入的背景顏色，如果輸入的值是數據庫

回答

相關問題