时间戳

首页 > 解决方案 > 当“电子邮件”字段有效时，如何启用我的按钮？

javascript - 当“电子邮件”字段有效时，如何启用我的按钮？

问题描述

我做了这个功能，以便在输入与空不同时启用表单按钮，但我不知道如何做到这一点，以便在#email ID 中，输入除了与空不同外，还必须包含字符'"@" 或字符串 "@gmail.com"、"@hotmail.com"。

这是功能

$(function () {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function () {
    if ($('#name').val() != '' && $('#email').val() != '' && $('#textarea').val() != '') {
        $('#button').attr('disabled', false);
    } else {
        $('#button').attr('disabled', true);
    }
});

});

这是 HTML

<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
                <span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
                <br>
                <span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
                <br>
                <span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>    
                <span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
                <br>
                
                <div id="button-container">
                <button type="submit" id="button" disabled="disabled"></button>
                </div>
              </form>

标签： javascripthtmljquery

解决方案

使用正则表达式并测试电子邮件输入字段的值是否匹配。

const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$(function() {
  $('#button').attr('disabled', true);
  $('#textarea, #email, #name').change(function() {
    if ($('#name').val() != '' && re.test($('#email').val()) != '' && $('#textarea').val() != '') {
      $('#button').attr('disabled', false);
    } else {
      $('#button').attr('disabled', true);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
  <span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
  <br>
  <span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
  <br>
  <span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
  <span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
  <br>

  <div id="button-container">
    <button type="submit" id="button" disabled="disabled">Submit</button>
  </div>
</form>

推荐阅读