Question

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

默认情况下，如果用户未在输入内输入任何内容，该按钮只会显示一个灰色@符号。
我找了一种方法，一旦用户开始输入输入，就改变提交按钮的文本/颜色（例如橙色＆＃34; X＆＃34;当电子邮件不正确时，以及绿色＆＃34;检查＆＃34;它是否正确。

我怎样才能实现这一目标？

Answer 1

简单）

＆＃13;

input:not(:valid) {
  background-color: #f60;
  }

＆＃13;

<input type="email">

＆＃13;

Answer 2

＆＃13;

var inputElement = document.getElementById('email');
var buttonElement = document.getElementById('button')

function validateEmail(email) {
    var 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,}))$/;
    return re.test(email);
}

email.addEventListener('keyup', function(e) {
  if(e.target.value === "") {
    return;
  }
  if(validateEmail(e.target.value)) {
    buttonElement.style['background-color']="green";
  }
  else {
        buttonElement.style['background-color']="red";
  }
});

＆＃13;

<input type="email" id="email">
<button type="button" id="button">submit</button>

＆＃13;

如Andrey Fedorov先前的回答所述，您可以使用HTML5表单验证。如果要以编程方式执行验证，可以使用以下示例

var inputElement = document.getElementById('email');
var buttonElement = document.getElementById('button')

//Stolen from http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
function validateEmail(email) {
    var 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,}))$/;
    return re.test(email);
}

email.addEventListener('keyup', function(e) {
  if(e.target.value === "") {
    return;
  }
  if(validateEmail(e.target.value)) {
    buttonElement.style['background-color']="green";
  }
  else {
        buttonElement.style['background-color']="red";
  }
});

获取输入元素并侦听keyup事件。每当事件被触发时，验证输入并设置按钮的颜色。

jsbin示例：http://jsbin.com/xepijemeha/edit?html,js,console,output

Answer 3

试一试：

<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>

Answer 4

对此的一些CSS解决方案是：

input + button::before {
    content: '+ ';
    color: green;
}
input:invalid + button::before {
    content: 'X ';
    color: red;
}

<input type="email" required />
<button>Submit</button>

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

4 个答案: