Question

我想做的逻辑是：

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

Answer 1

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

艰难的方式： 您将需要捕获onblur事件 - 当它们离开电子邮箱时会触发，您还需要一些AJAX将该值发送回您的脚本以测试它是否有效。< / p>

<强> 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类（valid和inValid） - 当提交页面时，如果电子邮件存在，则将有效类添加到输入控件，如果它没有添加无效的类。

<强> 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').'"';?>
>

首先尝试第二个

更新：错误修复

Answer 2

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

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

虽然红色确实很容易与＆＃34;错误＆＃34;相关联，但在给予场焦点时，用户可能会感到困惑。我建议你开始验证onblur事件何时触发 - 当用户显然已完成输入时 - 和/或当用户仍有焦点但未按键一段时间时。

如果我是用户，那将是我觉得最舒服的行为，以及我将直接解释为＆＃34;我已输入无效的电子邮件地址的行为＆＃34;

Answer 3

首先，您的用例似乎有一些可用性问题。通常，字段在失去焦点之前不会指示验证结果。这样，当用户尚未完成输入数据时，您不会因为验证错误而中断用户。

关于如何完成异步验证，您将使用XMLHttpRequest（例如使用jQuery的$.ajax()）。

在您的使用案例中，仅当电子邮件地址已存在时，输入才有效。在这种情况下，您可以创建一个单独的PHP页面（例如email_exists.php），它只是回显文本true或false，具体取决于传递的电子邮件是否存在。

E.g。
请求：http://example.com/email_exists.php?email=me@awesome.com
回复：true或false。

最后，在输入中注册“onChange”或“onBlur”事件监听器。当它触发时，您$.ajax()如上所述将电子邮件地址发送到PHP页面并检查响应。然后，您可以根据响应添加/删除类，以便为输入元素提供所需的外观。

如果输入的值在数据库中有效，则更改输入背景颜色

3 个答案: