Jquery到服务器问题

Question

我正在处理联系表格，我想将表格中用户字段的信息发送到邮件， 我编写了 php 页面以将其发送到服务器，但我不明白如何在 Jquery 中编写函数，如果有人能给我一个建议，我会非常感谢 这是javaScript：

$('.x-contact-form').on('submit', function(e) {
e.preventDefault();
var confere = new Confere({
 rules: this
})

confere.validate().then(function() {

//submit your form

}).catch(function(err) {

 //remove all errors notifications
Object.keys(confere.options.rules).map(function(key){
  $(`.${key}-group`).removeClass('has-error');
  $(`.${key}-group`).addClass('has-success');
  $(`#${key}_error`).text('');
});

//add errors on fields that failed validation
Object.keys(err.result).map(function(key) {
  $(`.${key}-group`).addClass('has-error');
  $(`#${key}_error`).text(err.result[key][0].message);
});
 });
 });

这是php：

<?php
if (isset($_POST['submit'])) { // Checking for submit form

$my_email = 'roni.itzhaik@gmail.com'; // Change with your email address

if ($_POST['submit'] == 'add') {
    $name       = trim(strip_tags(addslashes($_POST['name'])));
    $email      = trim(strip_tags(addslashes($_POST['email'])));
    $message    = trim(strip_tags(addslashes($_POST['message'])));
            $phone          = trim(strip_tags(addslashes($_POST['phone'])));

            $pattern_name   = '/^[a-zA-Z]{2}/';
    $pattern_email  = '/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/';
        $pattern_message   = '/^[a-zA-Z0-9]{2}/';
            $pattern_phone = '/^([0-9]{9,10})/';



    if ($email != '' && $message != '' && $phone != ''&& $name != '') {
        if (preg_match($pattern_email, $email)&& preg_match($pattern_name, $name)&& preg_match($pattern_message, $message)&& preg_match($pattern_phone, $phone) ) {
            $headers = 'From: ' . $email . "\r\n";
            $subject = 'Message from ' . $name;
                            $message_phone= $message.'Phone number: '.$phone;


            mail($my_email, $subject, $message_phone,  $headers);

                    echo 'success|<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Thank you! We will contact you shortly.</div>';

                    }
           elseif(!preg_match($pattern_email, $email)) {
            echo 'error|<div class="email_error"></i></button>Please enter a valid email address.</div>';
        }
                     elseif(!preg_match($pattern_name, $name)) {
            echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Name must be more then 2 letters.</div>';

        }
                     elseif(!preg_match($pattern_phone, $phone)) {
            echo 'error|<div class="phone_error"></i></button>Phone must be 9-10 digits.</div>';

        }
                     elseif(!preg_match($pattern_message, $message)) {
            echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Message must be more than 2 letters.</div>';

        }
    } elseif ($name== ''&& $message != '' && $phone != '' && $email != '') {
        echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill name</div>';
    }
            elseif ($phone== ''&& $message != '' && $name != '' && $email != '') {
        echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Phone number</div>';
    }
            elseif ($message== '' && $phone != ''&& $name != '' && $email != '') {
        echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Massage</div>';
    }
             elseif ($email== ''&& $message != '' && $phone != ''&& $name != '') {
        echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill Email address</div>';
    }
            else{
                echo 'error|<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert"><i class="ion-close"></i></button>Please fill all the fields</div>';
            }
}

} else { // Submit form false
header('Location: index.html'); 
}
?>

html:

 <form class="x-contact-form" style="max-width: 300px; margin: 10px">
 <div class="form-group name-group">
<label>Name</label>
<input class="form-control" name="name" data-rule="required|min:2|max:254" 
 />
<span id="name_error" class="text-danger"></span>
</div>
<div class="form-group email-group">
<label>Email</label>
<input class="form-control" name="email" data-rule="required|email|max:254" 
 />
<span id="email_error" class="text-danger"></span>
</div>
<div class="form-group phone-group">
<label>Phone</label>
<input class="form-control" name="phone" data-rule="required|min:9|max:10" 
 />
 <span id="phone_error" class="text-danger"></span>
  </div>
 <div class="form-group message-group">
   <label>Message</label>
<textarea class="form-control" name="message" data-
 rule="required|min:2|max:254"></textarea>
<span id="message_error" class="text-danger"></span>
 </div>
 <input type="submit" class="btn btn-primary" id="btn" value="Send" />
 </form>

Answer 1

我不太确定，因为我不知道 Confere，但我认为以下内容应该适合您

$('.x-contact-form').on('submit', function(e) {
    e.preventDefault();
    var confere = new Confere({
        rules: this // not sure if this is correct
    });
    confere.validate().then(() => {
        this.submit();
        Object.keys(confere.options.rules).map(function(key){
            $(`.${key}-group`).removeClass('has-error');
            $(`.${key}-group`).addClass('has-success');
            $(`#${key}_error`).text('');
        });
    }).catch(function(err) {
        Object.keys(err.result).map(function(key) {
            $(`.${key}-group`).addClass('has-error');
            $(`#${key}_error`).text(err.result[key][0].message);
        });
    });
});

Answer 2

你需要在你的 html 表单上设置 action 属性为你的 Php 文件的 url。您还需要将方法属性设置为 POST