如何在错误时动摇登录表单

本文介绍了如何在错误时动摇登录表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个HTML和CSS的登录页面。它功能齐全，所有这些东西。但是，当登录失败时，我想让登录表单动摇。我如何使它动摇。现在，它什么也没做。

这是我的HTML / CSS / JavaScript。如果需要更多的代码，请告诉我。

HTML

< div class =input> < c：if test =$ {not empty error}> < div class =error> $ {error}< / div> < / c：if> < c：if test =$ {not empty msg}> < div class =msg> $ {msg}< / div> < / c：if> < div class =email> < input type =textname =username placeholder =Example@email>< / input> < / div> < div class =password> < input type =passwordname =passwordplaceholder =*********>< / input> < / div> < / div> < input class =login_btntype =submitname =submitvalue =>

CSS

.container .login_component .login_wrap .login_wp .input input { width：290px; height：50px; padding-left：20px; font-size：15px; border：none; 背景：透明; } .container .login_component .login_wrap .login_wp .input .email { height：53px; margin-top：20px; 背景：网址（xiilab.mynetgear:81/c.hwang/rems/images/login/input.png）; 背景重复：不重复; background-position：center center; } .container .login_component .login_wrap .login_wp .input .password { height：53px; margin-top：20px; 背景：网址（xiilab.mynetgear:81/c.hwang/rems/images/login/input.png）; 背景重复：不重复; background-position：center center; } .container .login_component .login_wrap .login_wp .login_btn { height：55px; margin-top：30px; 背景：网址（xiilab.mynetgear:81/c.hwang/rems/images/login/login_btn.png）; 背景重复：不重复; background-position：center center; border：none; width：310px;

JavaScript $（'input [type = submit]'）。输入'）。addClass（'ahashakeheartache'）; }）; $（'。input'）。on（'webkitAnimationEnd oanimationend msAnimationEnd animationend'，function（e）{ $（'。input'）。delay（200）.removeClass（' ahashakeheartache'）; }）;

解决方案

如果您使用 animate.css ，您可以创建该效果。这里是 github 项目，您可以在其中下载源代码。您还可以查看其他效果。

来自animate.css的震动代码：

.animated { -webkit-animation-duration：1s; 动画持续时间：1秒; -webkit-animation-fill-mode：both; animation-fill-mode：both; } .animated.infinite { -webkit-animation-iteration-count：infinite; animation-iteration-count：infinite; } .animated.hinge { -webkit-animation-duration：2s; 动画持续时间：2s; } .animated.bounceIn， .animated.bounceOut { -webkit-animation-duration：.75s; 动画持续时间：.75s; } .animated.flipOutX， .animated.flipOutY { -webkit-animation-duration：.75s; 动画持续时间：.75s; } @ -webkit-keyframes shake { from，to { -webkit-transform：translate3d（0，0，0）; transform：translate3d（0，0，0）; } 10％，30％，50％，70％，90％{ -webkit-transform：translate3d（-10px，0，0）; transform：translate3d（-10px，0，0）; } 20％，40％，60％，80％{ -webkit-transform：translate3d（10px，0，0）; transform：translate3d（10px，0，0）; $ b $ @keyframes shake { from，to { -webkit-transform：translate3d（0，0，0）; transform：translate3d（0，0，0）; } 10％，30％，50％，70％，90％{ -webkit-transform：translate3d（-10px，0，0）; transform：translate3d（-10px，0，0）; } 20％，40％，60％，80％{ -webkit-transform：translate3d（10px，0，0）; transform：translate3d（10px，0，0）; } } .shake { -webkit-animation-name：shake; animation-name：shake;

JS

<$ p （函数（e）{ //检查登录$的代码$（$。$提交'）。 b $ b //如果失败 $（'。input'）。addClass（'animated shake'）; }）; }）

I have a login page with HTML and CSS. It's fully functional and all that stuff. However, when login fails I want the login form to shake. How do I make it shake. Right now, it does nothing.

Here is my HTML/CSS/JavaScript. If more code is needed, please tell me.

HTML

<div class="input"> <c:if test="${not empty error}"> <div class="error">${error}</div> </c:if> <c:if test="${not empty msg}"> <div class="msg">${msg}</div> </c:if> <div class="email"> <input type="text" name="username" placeholder="Example@email"></input> </div> <div class="password"> <input type="password" name="password" placeholder="*********"></input> </div> </div> <input class="login_btn" type="submit" name="submit" value="">

CSS

.container .login_component .login_wrap .login_wp .input input { width: 290px; height: 50px; padding-left: 20px; font-size: 15px; border: none; background: transparent; } .container .login_component .login_wrap .login_wp .input .email { height: 53px; margin-top: 20px; background: url("xiilab.mynetgear:81/c.hwang/rems/images/login/input.png"); background-repeat: no-repeat; background-position: center center; } .container .login_component .login_wrap .login_wp .input .password { height: 53px; margin-top: 20px; background: url("xiilab.mynetgear:81/c.hwang/rems/images/login/input.png"); background-repeat: no-repeat; background-position: center center; } .container .login_component .login_wrap .login_wp .login_btn { height: 55px; margin-top: 30px; background: url("xiilab.mynetgear:81/c.hwang/rems/images/login/login_btn.png"); background-repeat: no-repeat; background-position: center center; border: none; width: 310px; }

JavaScript

$('input[type=submit]').on('click', function(e){ e.preventDefault(); $('.input').addClass('ahashakeheartache'); }); $('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){ $('.input').delay(200).removeClass('ahashakeheartache'); });

解决方案

If you use animate.css you can create that effect. Here is the github project where you can download the source code. There are other effects you can check out too.

Code for shaking from animate.css:

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; }

JS

$(document).ready(function(){ $('.submit').click(function(e){ // Code to check login // If fail $('.input').addClass('animated shake'); }); })