3

作为我网站的用户注册过程的一部分，我编写了以下代码。显然，一旦用户填写了他们的电子邮件并点击提交，表单数据就会通过以下方式发送：

<?php

if(isset($_POST['email'])){

$email_from = $_POST['email'];

function died($error) {
    echo $error;
    die();
}

if(!isset($_POST['email'])) {
    died($error);
}

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
    if(!preg_match($email_exp,$email_from)) {

  $error_message .= ' <script type="text/javascript">
  alert("The email address you entered does not appear to be valid");
  window.location = "http://www.domain.com/";
  </script> ' ;
    }

if(strlen($error_message) > 0) {
    died($error_message);
}

etc, etc, etc....

我真的很感激一些帮助是这个脚本：

$error_message .= ' <script type="text/javascript">
  alert("The email address you entered does not appear to be valid");
  window.location = "http://www.domain.com/";
  </script> ' ;
    }

如何在 html 页面上创建一个仅淡入（点击时淡出）的错误消息，而不是在重定向到 html 页面之前在空白的白色 php 页面前发出 js 警报？

谢谢！

4

3 回答 3

2 
<span class="fadeInMessage" style="display:none;">"The email address you entered does not appear to be valid"</span>

这将开始隐形。然后，您将编写以下代码：

$(function(){
    $('.fadeInMessage').fadeIn();
});
于 2012-09-19T18:58:27.860 回答
2

使用jQuery的fadeIn函数怎么样？http://api.jquery.com/fadeIn/ 如果您不知道如何使用 jQuery，您只需将您的 html 页面链接到 jQuery 的 .js 脚本并根据需要使用这些功能。

更新：

回答您的评论。根据 中的讨论http://stackoverflow.com/questions/3708850/is-there-an-onload-event-for-input-elements，您可以执行以下操作：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    function test() { 
        alert('test');
    }
    </script>
</head>
<body >
    <?php 
    if($condition) { 
        print '<input type="hidden" />
    <script>
    test();
    </script>';
    }

    ?>


</body>

然后，你可以做任何你想做的事情test()，例如，调用fadeIn。此外，您可以在 PHP if 语句中指定所需的条件。

于 2012-09-19T18:55:48.983 回答
0

我同意其他两个答案；你应该使用jQuery的fadeIn功能。但是，如果您不想或不能使用 jQuery，这应该让您开始使用纯 Javascript 实现：

HTML：

<div id="message">Hello world!</div>​

Javascript：

var msg = document.getElementById( 'message' );
msg.style.opacity = 0;

function fadeIn() {
    if( msg.style.opacity < 1 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) + 0.01;        
        setTimeout( fadeIn, 25 );
    }
}

function fadeOut() {
    if( msg.style.opacity > 0 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) - 0.01;
        setTimeout( fadeOut, 25 );
    }
}        

fadeIn();

msg.onclick = function() { fadeOut(); }

​ 这是一个 jsFiddle 演示：http: //jsfiddle.net/GgYS8/

于 2012-09-19T20:08:45.010 回答