我试图做的逻辑是：
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;
我的代码是这样的：
索引.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>
脚本.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";
}
}
任何想法都值得赞赏！
用户.php(包含一个验证电子邮件是否存在于数据库中的函数(
function email_exists($email){
return (mysql_result(mysql_query("SELECT COUNT(user_id) FROM user WHERE user_email = '$email'"), 0) == 1) ? true : false;
}
好的，有两种方法可以做到这一点：
艰难的方式：您将需要捕获onblur事件 - 当它们离开邮箱时将触发，您还需要一些AJAX将该值发送回脚本以测试它是否有效。
j查询：
<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 的脚本 - 它应该选取 email 参数，然后返回：
{"isValid": "true"} or {"isValid": "false"}
取决于电子邮件的价值。
简单的方法：向页面添加两个 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').'"';?>
>
先试试第二个
更新：错误修复
您应该将onFocus更改为onkeyup，因为您似乎希望在用户键入时验证电子邮件地址。
从交互设计的角度来看，我建议您仅在最终输入无效时才将颜色更改为红色，并更改验证过程的时间。
尽管红色确实很容易与"错误"相关联，但当给定字段焦点已经被认为是错误的时，可能会让用户感到困惑。我建议您在触发onblur事件时开始验证 - 当用户显然完成键入时 - 和/或当用户仍然具有焦点但在一定时间内未按下键时。
如果我是用户，那将是我感觉最舒服的行为，也是我直接解释为"我输入了无效电子邮件地址">的行为。
首先，您的用例似乎存在一些可用性问题。通常，字段在失去焦点之前不会指示验证结果。这样，您就不会在用户尚未完成数据输入时因验证错误而打断用户。
关于如何完成异步验证，你将使用XMLHttpRequest(例如使用jQuery的$.ajax()(。
在您的使用案例中，仅当电子邮件地址已存在时，输入才有效。在这种情况下，您可以创建一个单独的 PHP 页面(例如 email_exists.php (，它只是回显文本true或false，具体取决于传递的电子邮件是否存在。
例如请求：http://example.com/email_exists.php?email=me@awesome.com
回应：true或false，因为它可能是。
最后，为输入注册一个"onChange"或"onBlur"事件侦听器。当它触发时，如上所述，您将电子邮件地址$.ajax()到 PHP 页面并检查响应。然后，您可以根据响应添加/删除类，为输入元素提供所需的外观。