电子邮件类型输入：如果电子邮件错误或正确，则动态更改按钮的颜色/文本

apatik 发表于 Dev

阿帕蒂克

我在表单中有一个电子邮件类型输入，如果忘记了该密码，则用户可以提交其电子邮件地址以恢复其密码。

默认情况下，如果用户未在输入内容中输入任何内容，则该按钮仅显示一个灰色@符号。
我正在寻找一种方法，一旦用户开始输入内容，就可以更改提交按钮的文本/颜色（例如，电子邮件不正确时为橙色“ X”，正确时为绿色“ check”）。

我该如何实现？

易山

试试吧：

<html>
    <title>This is test</title>
    <head>
        <style>
            .btn {
                color:#000;
                -webkit-transition: background 1s linear;
                -moz-transition: background 1s linear;
                -ms-transition: background 1s linear;
                -o-transition: background 1s linear;
                transition: background 1s linear;
            }
        </style>
    </head>
    <body>
        
        Enter Email : <input type="text" class="email">
        <button class="btn">Submit</button>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>

         $(document).ready(function(){
             
              $(".email").on("input",function(){
                  
                  if ($(this).val() == "")
                      $(".btn").css({backgroundColor:""});
                  
                  else {
                      if (checkEmail($(this).val()))
                          $(".btn").css({backgroundColor:"green"});
                      else
                          $(".btn").css({backgroundColor:"red"});
                  }
              })
              
              function checkEmail(txt) {
                  var patt = /[a-zA-Z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,3}$/;
                  if(patt.test(txt))
                      return true;
                  else
                      return false;
              }
         })

        </script>
    </body>
</html>