自定义PHP错误信息淡入效果

Question

自定义PHP错误信息淡入效果

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 页面之前成为 js 警报显示在空白的白色 php 页面上？

谢谢！

- user1677820

3个回答

2

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

这将开始不可见。然后您需要编写以下代码：

$(function(){
    $('.fadeInMessage').fadeIn();
});

- Zevi Sternlicht

这是否仅需替换掉 alert("this email...") 就可以了？ - user1677820

你可以回显（echo）或将其放入变量中，然后稍后回显它，它会一开始看不见，然后由于调用而慢慢显示！ - Zevi Sternlicht

那我应该保持window.location不变吗？<span>标签会放在index.html文件中吗？ - user1677820

@user1677820 我不明白。如果你想要重定向他，那么你需要决定是在消息之后还是等待一定的时间后再重定向他。也许通过点击某些东西或者等待一段时间来实现。然后你可以像平常一样调用 window.location。我真的不太明白你的问题。 - Zevi Sternlicht

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/

- Ethan Brown

那么我该如何将它与PHP文档集成呢？我只需将<div>放入index.html文件中，更新css文件并在php中包含javascript，就像它放置在上面的那样吗？我能否只使用include "index.html"和include "index.css"在我的php文件中？ - user1677820

上面的<div>是用来容纳要显示给用户的消息的容器。Javascript可以放在你选择的PHP或HTML中的<script>标签中。 - Ethan Brown

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hsnm · Accepted Answer

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

更新: 回答您的评论。根据在https://dev59.com/anA65IYBdhLWcg3wqASt中的讨论，以下是您可以执行的操作:

<!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 语句中指定所需的条件。