时间戳

首页 > 解决方案 > 当我单击提交时，如何阻止电子邮件验证弹出窗口出现？

javascript - 当我单击提交时，如何阻止电子邮件验证弹出窗口出现？

问题描述

所以我设法得到一个 Javascript 代码来检查电子邮件是否有效。所以如果你写 aa@bb.com 它是有效的，但如果它是 aa 或 aa@ 或 aa@bb。那么它是无效的，因为它不遵循我为它指定的模式才有效。问题是，我使用的是 Boostrap 表单，如果我点击提交，它会接受格式错误的电子邮件。我该如何阻止这个？由于 CSS，我仍然想使用 Bootstrap。

$("#submit").click(function() {
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();

  if (name == '' || email == '') {
    swal({
      title: "Empty Fields!",
      text: "Please check the missing fields",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else if (email !== /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/) {
    swal({
      title: "Invalid Email!",
      text: "Please write a valid email address",
      icon: "warning",
      button: "Ok, thank you",
    });
  } else {
    swal({
      title: "Good job!",
      text: "You're subscriptions has been registered",
      icon: "success",
      button: "Awesome!",
    });
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

标签： javascripthtmlforms

解决方案

  • 像这样检查用户输入的电子邮件的正确性!emailPattern.test(email)
  • 如果一切正常，手动提交表单
  • 防止默认提交事件，因为您要验证字段

var emailPattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

$("#submit").click(function(event) {
  event.preventDefault();
  var name = $("#fullname").val();
  var email = $("#emailaddress").val();

  if (name == '' || email == '') {
    console.log("Empty fields error");
  } else if (!emailPattern.test(email)) {
    console.log("Email pattern error");
  } else {
    console.log("Success");
    $('#testForm').submit(); // Here submit the form
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="testForm">
  <div class="box">
    <label for="fullname" class="form-tag">Name</label>
    <input type="text" name="name" id="fullname" class="form-control" required/>
    <label for="emailaddress" class="form-tag">Email</label>
    <input type="email" name="email" id="emailaddress" class="form-control" required/>
    <div class="button">
      <button id="submit" type="submit" class="btn btn-light btn-lg">Submit</button>
    </div>
  </div>
</form>

推荐阅读