带有输入颜色的 jQuery 表单验证

Posted 2023-05-09

【中文标题】带有输入颜色的 jQuery 表单验证

【英文标题】：jQuery form validation with input color

【发布时间】：2017-04-09 22:17:22

【问题描述】：

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

我喜欢你在这个网站上提交表单时的效果，输入会变成红色，然后逐渐变成初始颜色。你可以自己看这个

Here is video of this validation

【问题讨论】：

没问题，自己试试贴代码，说不定能帮到你……

【参考方案1】：

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

对于过渡效果，您可以使用 css3 背景色过渡到 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>

【讨论】：

它看起来不错，不过我会尝试添加一些渐变的颜色

transition: 'background-color 1s ease-in-out', "background-color": "red"

@kilogram 是的，你可以根据（y）修改。

@kilogram 我也做了一些更改，看看更新的答案是否对您有更多帮助。

这正是我想要的。它看起来棒极了。谢谢你，我的朋友。

【参考方案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 函数中编写时间。我想你可以弄清楚在哪里使用这段代码

【讨论】：

非常感谢，但我不想要边框。前面的例子很好

和我在 vk.com 上看到的很接近