如何强制用户输入有效的电子邮件，而不是让他们点击提交按钮？答案

【问题标题】：How to force user to enter a valid email and not let them click on submit button otherwise?如何强制用户输入有效的电子邮件，而不是让他们点击提交按钮？
【发布时间】：2020-10-06 16:42:53
【问题描述】：

我很好奇如何强制用户输入有效的电子邮件地址，如果它无效，不将提交按钮显示为活动状态？

这是我拥有的当前代码。目前如果邮件无效，会显示红色边框，但用户仍然可以点击提交按钮。

$("button[type='submit']").on('click', function () {

        $(".error").hide();
        let hasError = false;

        let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        let emailAddressVal = $("#user_email").val();
        if (emailAddressVal == ''){
            $("#user_email").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        else if(!emailReg.test(emailAddressVal)) {
            $("#user_email").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        //alert(emailAddressVal);

        if(hasError == true) {
            return false;
        }


    })

这里是输入的地方：

        <div class="col-md-3">
            <i class="fas fa-envelope fa-lg"></i>
            <label data-error="wrong" data-success="right">Enter your email</label>
            <input type="email" class="form-control validate purple-border" id="user_email">

        </div>

这是提交按钮：

<button type="submit" class="btn btn-purple purple-border">Perform Frame Classification</button>

【问题讨论】：

标签： jquery forms form-submit email-verification html-formhandler

【解决方案1】：

而不是在提交按钮上使用click事件来检查电子邮件，在用户输入时检查它（在keyup事件上），并使用测试结果来启用按钮（注意我们开始按钮被禁用）：

$("#user_email").on('keyup', function() {
  $(".error").hide();
  let hasError = false;

  let emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

  let emailAddressVal = $(this).val();
  if (emailAddressVal == '') {
    $("#user_email").after('<span class="error">Please enter your email address.</span>');
    hasError = true;
  } 
  else if (!emailReg.test(emailAddressVal)) {
    $("#user_email").after('<span class="error">Enter a valid email address.</span>');
    hasError = true;
  }

  $('button[type="submit"]').prop('disabled', hasError);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
  <i class="fas fa-envelope fa-lg"></i>
  <label data-error="wrong" data-success="right">Enter your email</label>
  <input type="email" class="form-control validate purple-border" id="user_email">

</div>


<button type="submit" class="btn btn-purple purple-border" disabled="disabled">Perform Frame Classification</button>

【讨论】：