Question

我的页面上有以下表格：

<div class="form-group">

    <form class="form-horizontal general subscribe" name="commentform" id="subscribe" method="post" action="#">
    <div class="col-lg-8 col-md-8 col-xs-8 lower">
      <input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" />
    </div>
    <div class="col-lg-4 col-md-4 col-xs-4">
      <input type="submit" class="btn btn-fill btn-info form_submit" value="Subscribe"/>
    </div>
    <div id="form_results"></div>
    </form>
 </div>

我处理电子邮件的jquery代码如下：

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

    $('.form_submit').click(function() {
      var form = $(this).parents('form');

      $.ajax({
        url: 'http://mywebservice/mail',
        type: "POST",
        data: {
          email: $('input[name=subscribe_email]').val()
        },
        dataType:'json',
        success: function(response) {
          output = '<p>Thanks, we will contact you soon!</p>';

          $("#contacts_form .form_item").val('');
          form.find('.form_inner').slideUp();
          form.find("#form_results").hide().html(output).slideDown();
        }
     });
     return false;
   });
});

现在每次用户按下“订阅”按钮时，电子邮件都会成功添加到数据库中，但问题是电子邮件未通过官方电子邮件模式验证。我认为在html5中唯一必要的检查是<input type="email"，但它无法正常工作......如何防止用户向数据库添加错误的电子邮件地址？

Answer 1

您需要为字段添加required属性为validated

<input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" required="required" />

如果您使用普通submit按钮submit表单，则会自动验证required字段。

如果您是submitting或在javasript function按钮上致电submit，那么您可以使用form.checkValidity()来验证required控件。

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

    $('.form_submit').click(function(){
        var form = $(this).parents('form');
        form.checkValidity()
            $.ajax({
                url: 'http://mywebservice/mail',
                type: "POST",
                data: {
                    email: $('input[name=subscribe_email]').val()

                },
                dataType:'json',
                success: function(response)
                {
                    output = '<p>Thanks, we will contact you soon!</p>';
                    $("#contacts_form .form_item").val('');
                    form.find('.form_inner').slideUp();
                    form.find("#form_results").hide().html(output).slideDown();
                }
            });
    return false;
});

});

Answer 2

为required添加<input type="email"属性，并确保页面上也没有JavaScript错误。

Answer 3

您需要根据HTML required添加input属性type email要求在执行任何验证之前。

<input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" required />

您还可以查看https://jqueryvalidation.org/，我使用它，它很棒，它允许您向用户显示自定义消息

为什么我的电子邮件验证无法在bootstrap和html5中运行？

3 个答案: