使用POST用ajax验证表单，不需要jquery

Question

我试图验证表单不使用jQuery在我的项目，我不需要jQuery。为了性能考虑，我想节省加载文件的时间。我已经检查了你可能不需要jquery，我发现这个片段使用POST与Ajax。

我只找到如何用jQuery或PHP验证电子邮件的教程。有人能给我解释一下，指导我，或者知道一个可以帮助我的教程吗?

我将非常感激!

我也检查了这个框架从microjs.com，但也没有说明:(

Ajax:

 var request = new XMLHttpRequest();
 request.open('POST', '/my/url', true);
 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
 request.send(data);

HTML表单:

<form class="contact-form">
    <label for="email">
         Email*
    </label>
    <input id="email" type="email" name="email" placeholder="[e-mail]" required>
    <label for="telephone">
         Telephone
    </label>
    <input id="telephone" type="tel" name="telephone" placeholder="[phone]">
    <label for="message">
         Message*
    </label>
    <textarea id="message" placeholder="Place your magnificent message here..." required></textarea>
    <input id="sendcopy" type="checkbox" name="sendcopy">
    <label for="sendcopy">
        Send yourself a copy of the email
    </label>
    <input type="submit" name="submit" value="Send">
    <span class="required-field-legend">
       <!-- insert icon -->
       Required fields
    </span>

Answer 1

您可以查看Mozilla Developer Network并尝试使用XMLHttpRequest。为了让您了解基本的概念，您需要编写一个php文件，该文件接收来自表单字段的信息，进行一些检查并发送XML响应。然后，您必须根据发生的事情向用户显示一些内容(例如，电子邮件地址为空)。

另一种方法(这是我建议的)是用javascript进行验证。只需获取所需元素的值，例如:

var tel = document.getElementById('telephone').value;

，然后检查是否正确。你可以用正则表达式做到这一点。如果有错误，通知用户。通过这种方式，您根本不用使用服务器。我希望我帮了你……

查看这个示例来理解我所说的的意思，我更喜欢在客户端进行验证。