javascript - 温泉用户界面 : Contact Us Form Submission

Question

我正在使用 onsen-ui 框架和 phonegap 创建一个移动应用程序。我想添加一个应用内“联系我们”表单，用户可以在其中提交表单，成功提交后，表单将发送至 email@domain.com。

我在index.html中添加了

<script type="text/ons-template" id="contact.html"> 
<ons-navigator title="Navigator" var="sNavigator"> 
<ons-page id="page-contact">
   <ons-toolbar>     

    <div class="left">
     <ons-toolbar-button onclick="setHome();">
        <ons-icon icon="fa-chevron-left"></ons-icon>
     </ons-toolbar-button>        
    </div> 

    <div class="center white">
    <span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
    </div>                  
   </ons-toolbar>

    <div class="home-header">
      <img src="css/images/banner.png" alt="" title="">
      <p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
    </div>   

   <form id="frm-contact" class="frm-contact" method="post">

   <div class="wrapper">
      <div class="field-wrapper">
      <input type="text" name="first_name"  class="first_name text-input text-input--underbar has_validation" 
      placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="text" name="last_name"  class="last_name text-input text-input--underbar has_validation" 
      placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="number" name="contact_phone"  class="contact_phone text-input text-input--underbar has_validation" 
      placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="email" name="email_address"  class="email_address text-input text-input--underbar has_validation" 
      placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="text" name="subject"  class="subject text-input text-input--underbar has_validation" 
      placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <textarea style="width:100%;height:80px" name="message"  class="message text-input text-input--underbar has_validation" 
      placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
      </div>

      <p class="small-font-dim trn" data-trn-key="create_account_terms">
      Please note all fields are mandatory, you should fill in all before submission.</p>      
   </div>

   <button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
    Submit Now!
    <div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
   </button>
   </form>

</ons-page>
</ons-navigator> 
</script>

然后我在 .js 文件中验证表单并调用 API 函数

    case "page-contact":         
     translatePage();
     translateValidationForm();
     $(".full_name").attr("placeholder",  getTrans("Full Name",'full_name') );
     $(".last_name").attr("placeholder",  getTrans('Last Name','last_name') );
     $(".contact_phone").attr("placeholder",  getTrans('Mobile Phone','contact_phone') );
     $(".email_address").attr("placeholder",  getTrans('Email address','email_address') );
     $(".subject").attr("placeholder",  getTrans('Subject','subject') );
     $(".message").attr("placeholder",  getTrans('Your Message','message') );        

     break;

我在这里进行验证并从网络服务器调用 API:

function contact()
{
    $.validate({    
        form : '#frm-contact',    
        borderColorOnError:"#FF0000",
        onError : function() {      
        },      
        onSuccess : function() {              
          var params = $( "#frm-contact").serialize();        
          params+="&device_id="+ getStorage("device_id");
          callAjax("contact",params);       
          return false;
        }  
    });
}

在网络服务器端，PHP 代码包括

    public function actionContact($to='',$from='',$subject='',$body='')
    {                
        $from1=Yii::app()->functions->getOptionAdmin('global_admin_sender_email');
        if (!empty($from1)){
            $from=$from1;
        }       

        $email_provider=Yii::app()->functions->getOptionAdmin('email_provider');

        if ( $email_provider=="smtp"){
            $smtp_host=Yii::app()->functions->getOptionAdmin('smtp_host');
            $smtp_port=Yii::app()->functions->getOptionAdmin('smtp_port');
            $smtp_username=Yii::app()->functions->getOptionAdmin('smtp_username');
            $smtp_password=Yii::app()->functions->getOptionAdmin('smtp_password');

            $mail=Yii::app()->Smtpmail;

            Yii::app()->Smtpmail->Host=$smtp_host;
            Yii::app()->Smtpmail->Username=$smtp_username;
            Yii::app()->Smtpmail->Password=$smtp_password;
            Yii::app()->Smtpmail->Port=$smtp_port;

            $mail->SetFrom($from, '');
            $mail->Subject = $subject;
            $mail->MsgHTML($body);
            $mail->AddAddress($to, "");
            if(!$mail->Send()) {
                //echo "Mailer Error: " . $mail->ErrorInfo;
                return false;
            }else {
                //echo "Message sent!";
                return true;
            }                       
        } elseif ( $email_provider=="mandrill"){
            $api_key=Yii::app()->functions->getOptionAdmin('mandrill_api_key');         
            try {
                 require_once 'mandrillapp/Mandrill.php';
                 $mandrill = new Mandrill($api_key);
                 $message = array(
                    'html' => $body,
                    'text' => '',
                    'subject' => $subject,
                    'from_email' => $from,
                    //'from_name' => 'Example Name',
                    'to' => array(
                        array(
                            'email' => $to,
                            //'name' => 'Recipient Name',
                            'type' => 'to'
                        )
                    )
                );                
                $async = false;
                $ip_pool = '';
                $send_at = '';
                $result = $mandrill->messages->send($message, $async, $ip_pool, $send_at);
                //dump($result);
                if (is_array($result) && count($result)>=1){
                    if ($result[0]['status']=="sent"){
                        return true;
                    }                       
                } 
            } catch(Mandrill_Error $e) {
                //echo 'A mandrill error occurred: ' . get_class($e) . ' - ' . $e->getMessage();

            }   
            return false;
        }

        $body = $_POST['first_name']. ' ' .$_POST['last_name']. ' ' .$_POST['contact_phone']. ' ' .$_POST['message'];

        $to       = 'info@domain.com';
        $from     = $_POST['email_address'];

        $headers  = "From: $from\r\n";      
        $headers .= "Content-type: text/html; charset=UTF-8\r\n";
        $subject = $_POST['subject'];
$message =<<<EOF
$body
EOF;

        if (!empty($to)) {
            if (@mail($to, $subject, $message, $headers)){
                return true;
            }
        }
        return false;
    }  

表单正在发送电子邮件，但是如果没有/空数据，我无法获得提交的信息。

请指教，谢谢。

Answer 1

根据您发布的内容，设备 ID 存在错误。具体来说，函数 getStorage 是未定义的。下面发布的代码工作正常，能够通过邮寄将所有字段发送到我的测试 PHP 页面并发送电子邮件。诚然，我没有像您那样使用复杂的 PHP 处理器，但它确实有效!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI 2.0 Quickstart</title>

    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.js"></script>

    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        function contact()
        {
            var params = $( "#frm-contact").serialize();    
            console.log(params);
        }
    </script>

</head>

<body>
 <ons-page id="page-contact">
   <ons-toolbar>     

    <div class="left">
     <ons-toolbar-button onclick="setHome();">
        <ons-icon icon="fa-chevron-left"></ons-icon>
     </ons-toolbar-button>        
    </div> 

    <div class="center white">
    <span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
    </div>                  
   </ons-toolbar>

    <div class="home-header">
      <img src="css/images/banner.png" alt="" title="">
      <p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
    </div>   

   <form id="frm-contact" class="frm-contact" method="post">

   <div class="wrapper">
      <div class="field-wrapper">
      <input type="text" name="first_name"  class="first_name text-input text-input--underbar has_validation" 
      placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="text" name="last_name"  class="last_name text-input text-input--underbar has_validation" 
      placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="number" name="contact_phone"  class="contact_phone text-input text-input--underbar has_validation" 
      placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="email" name="email_address"  class="email_address text-input text-input--underbar has_validation" 
      placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <input type="text" name="subject"  class="subject text-input text-input--underbar has_validation" 
      placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
      </div>

      <div class="field-wrapper">
      <textarea style="width:100%;height:80px" name="message"  class="message text-input text-input--underbar has_validation" 
      placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
      </div>

      <p class="small-font-dim trn" data-trn-key="create_account_terms">
      Please note all fields are mandatory, you should fill in all before submission.</p>      
   </div>

   <button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
    Submit Now!
    <div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
   </button>
   </form>

</ons-page>

</body>
</html>

PHP:

<?php 
    $to = 'test@test.com'; 
    $from = $_REQUEST['email_address']; 
    $message = $_REQUEST['message']; 
    $subject = $_REQUEST['subject']; 
    $header = "From: <".$email_address.">" ."\r\n";
    $send = @mail($to, $subject, $message, $header); 
    if(!$send){ 
        die(); 
    }
?>

另外，请注意我没有发送您的其他字段 [first_name, last_name, contact_phone] 但它们可以添加到任何地方。最后，这绝不是发送邮件的安全方法，而是将一些东西放在一起以证明 Onsen 不会干扰使用 jQuery 通过 HTML 表单发送邮件。

编辑:尽管这是实际问题的分支，但根据您的评论，我强烈建议您阅读其中的一些内容:

https://codereview.stackexchange.com/questions/19365/is-this-a-secure-and-best-practice-php-mail-function

Secure php email script

What is the best way to send a secure email in PHP