javascript - 为什么我的电子邮件验证在 bootstrap 和 html5 中不起作用？

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属性

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

如果您使用普通的提交按钮提交表单，则必填字段会自动验证。

如果您正在提交或在提交按钮上调用javasript函数，那么 您可以使用form.checkValidity()来验证必需的控件。

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;
});

});