Question

我想用jQuery验证空输入字段，就像在这个网站上vk.com

一样

我喜欢你在这个网站上提交表格时的效果，输入变成红色片刻并逐渐变为初始颜色。你可以自己看看

Answer 1

您可以使用Jquery并在提交时添加error，并在1秒后删除该类。

对于过渡效果，您可以使用css3 background-color过渡到error类。

例如，请参阅下面的代码。

$(document).ready(function() {
  $("#login_button").click(function() {
    var phoneEmail = $("#phone_email");
    if(!phoneEmail.val()) {
      phoneEmail.addClass('error');
      setTimeout(function(){
        phoneEmail.removeClass('error');
      }, 1000);
    }
  });
});

input {
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

input.error {
  background: #f3765b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="phone_email" placeholder="Phone or email">
  <input type="password" id="pass" placeholder="password">  
  <button id="login_button">Log in</button>  
</form>

Answer 2

尝试这样的事情：

//check if input is empty    
$('.someinputs').each(function(){
          if($(this).val() == 0 || $(this).val() == '') {
            $(this).addClass('empty_field');
          }
          else {
            $(this).removeClass('empty_field');
          }
        });

//this function lights field which have class '.empty_field'
function lightEmpty(){
                $('.empty_field').each(function(){                      
                   $(this).css('border','2px solid #d8512d');
                });
                setTimeout(function(){
                $('.empty_field').each(function(){                        
                  $(this).css('border','1px solid #cdcdcd');
                });
              },1500);
}

//this triggers lightEmpty()
if (emptyInputs.length != 0)
    {
        lightEmpty();
    }

它只是用特定颜色改变输入的边界，可以在setTimeout函数中写入时间。我想你可以弄清楚在哪里使用这段代码

使用输入颜色的jQuery表单验证

2 个答案: