Question

我正在尝试在不使用jQuery的情况下验证表单，因为在我的项目中我不需要jQuery。为了性能，我想节省加载文件。我已经检查了youmightnotneedjquery，我发现这个代码片段使用了与Ajax的POST。

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

我非常感激！

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

的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="example@emailserver.com" required>
    <label for="telephone">
         Telephone
    </label>
    <input id="telephone" type="tel" name="telephone" placeholder="+32 343 645 461">
    <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开发者网络并尝试使用XMLHttpRequest。为了给你一个基本的想法，你将不得不写一个php文件，它从表单字段接收信息，做一些检查并发回XML响应。然后，您必须根据发生的事情向用户显示某些内容（例如，电子邮件地址为空）。

另一种方法~~（我建议的那个）~~是用javascript进行验证。只需获取所需元素的值，例如：

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

然后检查是否正常。您可以使用正则表达式执行此操作。如果出现问题，请通知用户。这样就根本不使用服务器。我希望我帮助过......

请参阅此jsfiddle以了解我的意思是在客户端使用~~我更喜欢~~验证。

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

1 个答案: