javascript - 我需要帮助来修复表单中的空白电子邮件

Question

我每天大约在同一小时从我的联系表格中收到 6 封空白电子邮件，如果我在网站上填写表格，所有信息都会通过，并且我会收到包含详细信息的电子邮件，我有一个验证我的表格，但仍然收到空白电子邮件。我需要做什么？

一开始，我的 php 中的某些行出现错误，但它已经修复，但我仍然收到空白电子邮件。

这是我的 PHP 代码:

$fname = $lname = $email = $tel = $address = $project = $message = '';

if (isset($_POST['fname'])) {
    $fname = $_POST['fname'];
}

if (isset($_POST['lname'])) {
    $lname = $_POST['lname'];
}

if (isset($_POST['email'])) {
    $email = $_POST['email'];
}

if (isset($_POST['tel'])) {
    $tel = $_POST['tel'];
}

if (isset($_POST['address'])) {
    $address = $_POST['address'];
}

if (isset($_POST['project'])) {
    $project = $_POST['project'];
}

if (isset($_POST['message'])) {
    $message = $_POST['message'];
}

    $to = '...';
    $email_subject = "$fname $lname Contact You from ... :";
    $email_body = "You have received a new message from your website contact form.<br/>"."Here are the details:<br/><br/> Name: $fname $lname<br/> Email: $email<br/> Phone: $tel<br/> Address: $address<br/> Project: $project<br/> Message:\n$message";
    $headers  = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
    $headers .= 'From: ...' . "\r\n";
    $headers .= 'Reply-To: ...' . "\r\n";
    $headers .= 'X-Mailer: PHP/' . phpversion();

    if(mail($to,$email_subject,$email_body,$headers)) {
            echo "OK";
        }

这是我的 HTML 代码:

                <form action="" method="post" role="form" class="contactForm" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-lg-6 form-group">
                            <label for="fname">First Name*</label>
                            <input type="text" class="form-control" name="fname" id="fname" data-rule="minlen:3" data-msg="*Please Enter at Least 3 Chars" />
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label for="lname">Last Name*</label>
                            <input type="text" class="form-control" name="lname" id="lname" data-rule="minlen:3" data-msg="*Please Enter at Least 3 Chars" />
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label for="tel">Phone Number*</label>
                            <input type="tel" class="form-control" name="tel" id="tel" data-rule="minlen:10" data-msg="*Please Enter a Valid Phone Number" />
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-6 form-group">
                            <label for="email">Email Address*</label>
                            <input type="email" class="form-control" name="email" id="email" data-rule="email" data-msg="*Please Enter a Valid Email Address" />
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-12 form-group">
                            <label for="address">Location (Address)</label>
                            <input type="text" class="form-control" name="address" id="address" />
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-12 form-group">
                            <label for="project">Select Project / Service</label>
                            <select type="text" class="form-control" name="project" id="project">
                                <option selected value="">Select Project</option>
                                <option value="Emergency HVAC Service">Emergency HVAC Service</option>
                                <option value="Air Conditioner Installation">Air Conditioner Installation</option>
                                <option value="Air Conditioner Repair">Air Conditioner Repair</option>
                                <option value="Air Conditioner Replacement">Air Conditioner Replacement</option>
                                <option value="Duct Repair">Duct Repair</option>
                                <option value="Duct Replacement">Duct Replacement</option>
                                <option value="Furnace Repair">Furnace Repair</option>
                                <option value="HVAC Maintenance">HVAC Maintenance</option>
                                <option value="Air Duct Cleaning">Air Duct Cleaning</option>
                            </select>
                            <div class="validation"></div>
                        </div>
                        <div class="col-lg-12 form-group">
                            <label for="message">Message</label>
                            <textarea class="form-control" name="message" id="message"></textarea>
                            <div class="validation"></div>
                        </div>
                        <div id="hide-button" class="col-lg-12 text-center">
                            <button type="submit" class="btn btn-primary">Send Message</button>
                        </div>
                        <div class="col-lg-10 offset-lg-1 text-center">
                            <div id="sendmessage">Your message has been sent. Thank you!</div>
                            <div id="errormessage">Sorry! Something went wrong. Try again.</div>
                        </div>
                    </div>
                </form>

Javascript 验证:

jQuery(document).ready(function($) {
  "use strict";

  //Contact
  $('form.contactForm').submit(function() {
    var f = $(this).find('.form-group'),
      ferror = false,
      emailExp = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;

    f.children('input').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;

          case 'email':
            if (!emailExp.test(i.val())) {
              ferror = ierror = true;
            }
            break;

          case 'checked':
            if (!i.attr('checked')) {
              ferror = ierror = true;
            }
            break;

          case 'regexp':
            exp = new RegExp(exp);
            if (!exp.test(i.val())) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    f.children('textarea').each(function() { // run all inputs

      var i = $(this); // current input
      var rule = i.attr('data-rule');

      if (rule !== undefined) {
        var ierror = false; // error flag for current input
        var pos = rule.indexOf(':', 0);
        if (pos >= 0) {
          var exp = rule.substr(pos + 1, rule.length);
          rule = rule.substr(0, pos);
        } else {
          rule = rule.substr(pos + 1, rule.length);
        }

        switch (rule) {
          case 'required':
            if (i.val() === '') {
              ferror = ierror = true;
            }
            break;

          case 'minlen':
            if (i.val().length < parseInt(exp)) {
              ferror = ierror = true;
            }
            break;
        }
        i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind');
      }
    });
    if (ferror) return false;
    else var str = $(this).serialize();
    var action = $(this).attr('action');
    if( ! action ) {
      action = 'mail/mailer.php';
    }
    $.ajax({
      type: "POST",
      url: action,
      data: str,
      success: function(msg) {
        // alert(msg);
        if (msg == 'OK') {
          $('#hide-button').addClass("hide");
          $("#sendmessage").addClass("show");
          $("#errormessage").removeClass("show");
          $('.contactForm').find("input, textarea").val("");
        } else {
          $('#hide-button').removeClass("hide");
          $("#sendmessage").removeClass("show");
          $("#errormessage").addClass("show");
        }

      }
    });
    return false;
  });

});

告诉我是否需要添加我的 jQuery。我对 html 和 css 非常熟悉，但对 PHP 和 Javascript 不太熟悉。

Answer 1

看起来您有一些 JavaScript/jQuery 内容形式的客户端验证，但事实是您不能信任客户端。客户端验证可以帮助用户，但不得被服务器依赖。

有人可以在不使用浏览器的情况下向您的表单处理 PHP 脚本发出 POST 请求，这样他们就可以发送他们喜欢的任何旧数据。您可能看到的是来自某些爬虫程序或类似程序的电子邮件，正是在执行此操作。

因此，您需要在 PHP 代码中添加一些类似的验证逻辑(这显然是在服务器端，因此比客户端的代码更值得信赖)。例如，要检查 lname 字段是否为空，您可以执行以下操作:

if (empty($lname)) {
    showErrorPage('Please enter a last name!');
    exit; // To halt processing.
}