0

我想做的逻辑是：

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";
    }
}

任何想法表示赞赏！

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;
}
4

3 回答 3

3

好的，有两种方法可以做到这一点：

困难的方式： 您将需要捕获 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 的脚本 - 它应该获取 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').'"';?>
>

先试试第二个

更新：错误修复

于 2012-05-16T19:46:30.423 回答
2

您应该更改onFocus为onkeyup，因为您似乎想在用户键入时验证电子邮件地址。

从交互设计的角度来看，我建议您仅在最终输入无效时将颜色更改为红色，并更改验证过程的时间。

尽管红色确实很容易与“错误”相关联，但当赋予字段焦点已被视为错误时，它可能会让用户感到困惑。我建议您开始验证onblur事件何时触发 - 当用户显然完成打字时 - 和/或当用户仍然有焦点但在一定时间内没有按下某个键时。

如果我是用户，那将是我觉得最舒服的行为，也是我直接解释为“我输入了无效的电子邮件地址”的行为。

于 2012-05-16T19:53:18.097 回答
1

首先，您的用例似乎存在一些可用性问题。通常，一个字段在失去焦点之前不会给出验证结果的指示。这样，您就不会在用户尚未完成输入数据时因验证错误而打扰他们。

关于如何完成异步验证，您将使用 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 页面并检查响应。然后，您可以根据响应添加/删除类，以使输入元素具有所需的外观。

于 2012-05-16T20:03:43.250 回答