html 在输入框中验证和比较电子邮件

bf1o4zei  于 2023-10-14  发布在  其他
关注(0)|答案(2)|浏览(140)

我试图验证电子邮件地址,如果输入的电子邮件地址匹配的一个,我们不想要的。
该按钮应保持禁用状态,直到一切正常。并重新启用
但当我尝试输入有效的电子邮件或电子邮件不等于email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)的按钮仍然禁用

$(document).ready(function(){
  $('.keyup-email').keyup(function() {
    var inputVal = $(this).val();
    var emailReg = /^(?!.*_)\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})/;
    if(!emailReg.test(inputVal)) {
      $(".edBtn").prop("disabled", true);
    }
    else if(inputVal == '[email protected]') {
      $(".edBtn").prop("disabled", true);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="keyup-email text-input" name="7" value="">
<div class="row">
  <button type="button" id="m1p" class="edBtn">submit</b></button>
kq0g1dla

kq0g1dla1#

按钮保持禁用状态
因为你从来没有启用它。目前,您的代码有两个条件,在这些条件下您可以禁用该按钮。您希望以其他方式启用它吗?然后加上这个条件:

if(!emailReg.test(inputVal)) {
  $(".edBtn").prop("disabled", true);
}
else if(inputVal == '[email protected]') {
  $(".edBtn").prop("disabled", true);
}
else {
  $(".edBtn").prop("disabled", false);
}

基本上,如果你想让按钮 * 不被禁用 *,将disabled属性设置为false

h22fl7wq

h22fl7wq2#

只需将else添加到您的条件语句中,并将按钮禁用为false。

$(document).ready(function(){
                $('.keyup-email').keyup(function() {
                    var inputVal = $(this).val();
                    var emailReg = /^(?!.*_)\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})/;
                    if(!emailReg.test(inputVal)) {
                        $(".edBtn").prop("disabled", true);
                    }
                    else if(inputVal == '[email protected]') {
                        $(".edBtn").prop("disabled", true);
                    }else{
                        $(".edBtn").prop("disabled", false);
                    }
                });
            });
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
   
    
 

<input type="text" class="keyup-email text-input" name="7" value="">
<div class="row">
                                            
    <button type="button" id="m1p" class="edBtn">
        
            submit
        </b>
    </button>
    
    </body>
</html>

相关问题