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

大佬教程收集整理的这篇文章主要介绍了当“电子邮件”字段有效时，如何启用我的按钮？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我做了这个功能，以便在输入不同于空时启用表单按钮，但我不知道如何做到这一点，在#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>

解决方法

const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[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>

大佬总结

以上是大佬教程为你收集整理的当“电子邮件”字段有效时，如何启用我的按钮？全部内容，希望文章能够帮你解决当“电子邮件”字段有效时，如何启用我的按钮？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。