Jquery 和联系表单验证

Question

我正在尝试将验证规则添加到联系表单的电子邮件部分，以使该字段不为空并且是有效的电子邮件地址。

我怎样才能做到这一点？

我还想添加一个在提交表单后发送给用户的自动回复？

$("#ContactForm").submit( function() {
    $.ajax({
        type: "POST",
        url: "{homepage}mailer/mailer.php",
        data: $(this).serialize(),
        success: function(data){
            $('#fancybox-content #quote_box #ContactForm').html('<div style="padding-top: 15px; text-align:center;">Message Sent! Thank you.</div>');
            setTimeout(function(){
                $.fancybox.close();
            },3500);
        }
    });
});

<form id="ContactForm" name="ContactForm" action="{homepage}mailer/mailer.php" method="post">
    <input type="hidden" name="_sendto" value="email@test.com">
    <input type="hidden" name="_subject" value="Quote Request">
    <label for="name">Name</label><input type="text" name="name"><br>
    <label for="title">Title</label><input type="text" name="title"><br>

    <label for="customer_segment">Customer segment</label><input type="text" id="customer_segment" name="customer_segment" value=""><br>
    <label for="company">Company</label><input type="text" name="company"><br>
    <label for="email">Email</label><input type="text" name="email"><br>
    <label for="phone">Phone</label><input type="text" name="phone"><br>
    <label for="city">City</label><input type="text" name="city"><br>
    <label for="state">State</label><input type="text" name="state"><br>
    <label for="country">Country</label><input type="text" name="country"><br>
    <label for="contact_interested_in">Product interested in</label><input type="text" name="prod_inquiry" value="{exp:cookie_plus:get name="" parse="inward"}{exp:channel:entries entry_id="{cookie}"}{title}{/exp:channel:entries}{/exp:cookie_plus:get}"><br>
    <label for="contact_preference">Contact preference</label>
    <input class="radio" type="radio" name="contact_preference" value="Phone"> <span class="label">Phone</span>
    <input class="radio" type="radio" name="contact_preference" value="Email"> <span class="label">Email</span><br>
    <input id="button" type="submit" value="Submit" />
</form>

请注意，我没有创建此代码并且对它不是很熟悉，我们有一家开发公司创建了我们的网站，我只是想扩展它以满足我们的需求，我只需要一点方向。

Answer 1

看看http://unwrongest.com/projects/valid8/（还有大约 500 个其他“表单验证”插件）。这个是我最喜欢的，因为它非常纤薄和简单。

Answer 2

使用 if 语句将您的 $.ajax 调用括起来，该语句使用正则表达式检查电子邮件输入值。谷歌“regular expression email javascript”，你会找到你想要的。

请注意，尽管在 javascript 中验证表单不是很安全，因为任何具有一定编程知识的人都可以通过直接发布到您的 php 脚本来检查您的页面的来源并绕过您的验证。最好在“mailer.php”中验证，将任何错误返回到您的 $.ajax 成功回调，然后使用 javascript 向用户显示错误消息。

Answer 3

由于您不熟悉第三方开发人员的工作，并且该站点是使用 ExpressionEngine 构建的，您可以考虑将自定义表单处理器替换为流行的Solspace Freeform Module：

Freeform 允许您在自己的网站上创建简单灵活的表单，以 从您的用户那里收集信息。

在您的 EE 数据库中记录和组织到您的表单中的帖子为 也可以选择邮寄到您提供的通知电子邮件中。

您可以接收来自提交者的附件并拥有这些附件 存储在您的数据库中，并作为附件寄回给管理员 或提交用户。

在众多功能中，Freeform 提供服务器端表单验证、通知和确认电子邮件以及 CAPTCHA 集成——作为奖励，Freeform 是免费的，its features are well-documented。

您甚至可以在 Freeform 旁边使用 jQuery Validation Plugin 来提供客户端数据验证或使用异步 HTTP (Ajax) 请求提交表单。

Answer 4

如果您尝试根据在 google 上找到的正则表达式来验证电子邮件地址，请务必小心。 AFAIK，没有一个正则表达式可以根据RFC 2822 正确验证电子邮件地址。您将在那里发现的大多数电子邮件地址要么错误地拒绝有效的电子邮件地址，要么接受无效的电子邮件地址。我发现的最接近的正则表达式是打印出来的一页半。

编辑：

例如，所有这些都是有效的电子邮件地址，如果您正在验证电子邮件地址，则应允许所有这些：

1. Abc\@def"@example.com
2. “Fred Bloggs”@example.com
3. “Joe\Blow”@example.com
4. “Abc@def”@example.com
5. customer/department=shipping@example.com
6. $A12345@example.com
7. !def!xyz%abc@example.com
8. _somename@example.com