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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-table-txt-check-shake-style-codes/

具体代码如下：

！DOCTYPE htmlheadtitlejQuery动态表单验证效果/title style type=' text/CSS ' body { font-family : Arial，Sans-Serif；font-size :0.85 em} img { border:none}ul，ul Li { list-style-type : none；保证金： 0；padd : 0；} ul李。第一个{边框-顶部： 1px实心# DFDFdf} ul Li . last { border : none } ul p {左侧浮动：保证金： 0；宽度： 310 px}ul h3{左侧浮动：font-size : 14px字体粗细：粗体；余量： 5px 0 0 0 0宽度： 200像素；边距-左侧：20 px} ul Li {边框-底部： 1px实心# DFDFdfpadd : 15px 0；宽度宽度：600像素飞越：隐藏；}ul输入[type='text']，ul输入[type=' password ']{ width :300 px；padding:5px位置：相对；border : solid 1px # 666-moz-border-radius :5 px；-web套件-边框-半径：5 px} ul输入。必需{边框：实心1px # f00}/style脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $(' # registration ')).单击(function(){ resetFields()；var空字段=$(' input[value=]')；if(空字段。size)(0){空字段。每个(函数(){ $(this)).停止()。动画({ left: '-10px' }，100).动画({ left: '10px' }，100).动画({ left: '-10px' }，100).动画({ left: '10px' }，100).动画({ left: '0px' }，100).addClass(')必选');});} });});函数resetFields(){ $('输入[type=text]，输入[type=password]).removeClass(“”必需');}/脚本/头体ul Li=' first ' H3您的名字：/H3 pinput type=' text ' value=' First and Last name ' id=' name ' name=' name '/p/Li Li H3电子邮件地址：/H3 pinput type=' text ' value='[email protected]' name=' email '/p/Li Li H3密码：/H3 pin put type=' password ' name=' passwd '/p/Li Li H3密码确认：/H3 pinput type=' password ' name=' passwd _ conf '/p/Li 李用户名：/H3 pinput type=' text ' value=' my userName ' id=' userName ' name=' user _ name '/p/Li Li class=' last ' a id=' registration ' href=' # ' img src=' http : images/button submit。 png ' style='竖排-中间对齐3360；//aimg src=' http : images/点击此处。png ' style='竖排-中间对齐：//li /ul/body/html希望本文所述对大家的jquery程序设计有所帮助。