HTML怎么文本框抖动效果,jQuery实现动态表单验证时文本框抖动效果完整实例

本文实例讲述了jQuery实现动态表单验证时文本框抖动效果。分享给大家供大家参考。具体如下：

这里使用jQuery实现的动态表单验证特效，当用户输入错误或没有输入的时候点击提交按钮，有问题的输入框会抖动几下，以提示用户此项有问题，文本框抖动功能都有意思，这个表单比较典型，想实现jquery Ajax表单功能的可以参考。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

jQuery动态表单验证效果

body

{

font-family:Arial, Sans-Serif;

font-size:0.85em;

}

img

{

border:none;

}

ul, ul li

{

list-style-type: none;

margin: 0;

padding: 0;

}

ul li.first

{

border-top: 1px solid #DFDFDF;

}

ul li.last

{

border: none;

}

ul p

{

float: left;

margin: 0;

width: 310px;

}

ul h3

{

float: left;

font-size: 14px;

font-weight: bold;

margin: 5px 0 0 0;

width: 200px;

margin-left:20px;

}

ul li

{

border-bottom: 1px solid #DFDFDF;

padding: 15px 0;

width:600px;

overflow:hidden;

}

ul input[type="text"], ul input[type="password"]

{

width:300px;

padding:5px;

position:relative;

border:solid 1px #666;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

ul input.required

{

border: solid 1px #f00;

}

$(document).ready(function() {

$("#signup").click(function() {

resetFields();

var emptyfields = $("input[value=]");

if (emptyfields.size() > 0) {

emptyfields.each(function() {

$(this).stop()

.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)

.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)

.animate({ left: "0px" }, 100)

.addClass("required");

});

}

});

});

function resetFields() {

$("input[type=text], input[type=password]").removeClass("required");

}

• 您的名字：

• Email地址：

• 密码：

• 密码确认：

• 用户名：

•