从 php 获取数据到 JavaScript [验证电子邮件]答案

【问题标题】：Get data from php to JavaScript [validation email]从 php 获取数据到 JavaScript [验证电子邮件]
【发布时间】：2015-11-14 21:42:07
【问题描述】：

如何从 PHP 获取数据到 Javascript？
我有一条由 PHP 脚本生成的错误消息，我想将消息转换为 JavaScript 以显示电子邮件验证的结果。

我完成了输入表单为空时的错误验证脚本，
现在我很困惑如果输入表单不为空并且电子邮件验证成功，如何获得成功消息。

谁能帮帮我？

这是我的 PHP 代码：

{"error":1,"info":[
{"fieldId":"contact-form-name","message":"Please enter your name."},
{"fieldId":"contact-form-mail","message":"Please enter valid e-mail."},
{"fieldId":"contact-form-message","message":"Please enter your message."}]}

这是我的 JavaScript 代码：

;(function($,doc,win) {
"use strict";

var contactForm=function(object,option)
{
    /**********************************************************************/

    var $self=this;
    var $this=$(object);
    var $option=option;

    /**********************************************************************/

    this.build=function() 
    {
        $this.bind('submit',function(e) 
        {
            e.preventDefault();
            $self.submit();
        });
    };

    /**********************************************************************/

    this.submit=function()
    {
        this.blockForm(true);
        <!--$.post('plugin/contact-form/contact-form.php',$this.serialize(),this.processResponse,'json');-->            
        $.post('plugin/contact-form/contact-form.php',$this.serialize(),this.processResponse,'json');           
    };

    /**********************************************************************/

    this.processResponse=function(response)
    {
        $self.blockForm(false);
        $this.find('li').qtip('destroy');

        var error=false;

        if(typeof(response.info)!='undefined')
        {   
            if(response.info.length)
            {   
                for(var key in response.info)
                {
                    error=error || response.error;

                    $('#'+response.info[key].fieldId).parents('li:first').qtip(
                    {
                        show        :   
                        { 
                            target  :   $(this) 
                        },
                        style       :   
                        { 
                            classes :   (response.error==1 ? 'template-qtip template-qtip-error' : 'template-qtip template-qtip-success')
                        },
                        content     :   
                        { 
                            text    :   response.info[key].message 
                        },
                        position    :   
                        { 
                            my      :   'bottom center',
                            at      :   'top center' 
                        }
                    }).qtip('show');    
                }
            }
        }

        if(!error) 
        {
            $this.find('input[type="text"],textarea').val('').blur();
            window.setTimeout(function() 
            { 
                $('#contact-form-submit').qtip('destroy'); 
            },2000);
        }           
    };

    /**********************************************************************/

    this.blockForm=function(block)
    {
        if(block) $this.find('li').block({message:false,overlayCSS:{opacity:'0.3'}});
        else $this.find('li').unblock();            
    };

    /**********************************************************************/
}

/**************************************************************************/

$.fn.contactForm=function(option) 
{
    return this.each(function() 
    {
        var object=new contactForm(this,option);
        object.build();

        return(object);
    });
};

})(jQuery,document,window);

这是我的表格：

<form name="contact-form" id="contact-form" method="post">

                    <ul class="template-reset-list template-clear-fix">

                        <li>
                            <label for="contact-form-name" class="template-infield">Name (required)</label>
                            <input type="text" name="contact-form-name" id="contact-form-name"/>
                        </li>
                        <li>
                            <label for="contact-form-mail" class="template-infield">E-mail (required)</label>
                            <input type="text" name="contact-form-mail" id="contact-form-mail"/>
                        </li>
                        <li>
                            <label for="contact-form-website" class="template-infield">Websiste</label>
                            <input type="text" name="contact-form-website" id="contact-form-website"/>
                        </li>
                        <li>
                            <label for="contact-form-subject" class="template-infield">Subject</label>
                            <input type="text" name="contact-form-subject" id="contact-form-subject"/>
                        </li>
                        <li>
                            <label for="contact-form-message" class="template-infield">Message (required)</label>
                            <textarea name="contact-form-message" id="contact-form-message"></textarea>
                        </li>
                        <li>
                            <label for="contact-form-submit" class="template-infield"></label>
                            <input type="submit" name="contact-form-submit" id="contact-form-submit" value="Submit"/>
                        </li>

                    </ul>

                </form>

【问题讨论】：

我认为如果输入了所有必填字段，则无需获得成功消息，当然可以，但是您应该在客户端进行验证，而不是在提交操作之后将验证结果返回给客户端。要获得电子邮件发送成功消息，只需在您的 php 代码中再添加一条，并在服务器发送电子邮件完成时做出响应。
如果输入表单已填写，为什么消息仍然存在？你能告诉我一些代码吗@QuanNguyen
我正在考虑 qtip('destroy') 语句。有用？如果没有，您可以尝试使用 'hide' 或 'remove' 或者您可能想要循环每个 qtip 元素并将其删除。例如：jQuery('#IdElement').qtip('destroy');
你可以再试试：替换 $('#contact-form-submit').qtip('destroy');用 $('.qtip').remove();
我必须在哪里添加发送邮件功能？如果发送邮件成功，我想显示成功消息。请帮帮我，我不明白 qtip 和传递数据@QuanNguyen

标签： javascript php html validation email-validation

【解决方案1】：

我认为您正试图通过预览获取受版权保护的模板。通过购买模板来支持开发者——您不仅可以获得正确的模板文件、php插件，还可以获得开发者本人的技术支持。

【讨论】：