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


Posted in Javascript onAugust 21, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<title>jQuery动态表单验证效果</title>
<style type="text/css">
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;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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");
}
</script>
</head>
<body>
 <ul>
 <li class="first">
  <h3>您的名字:</h3>
  <p><input type="text" value="First and Last name" id="name" name="name" /></p>
 </li>
 <li>
  <h3>Email地址:</h3>
  <p><input type="text" value="my@email.com" name="email" /></p>
 </li>
 <li>
  <h3>密码:</h3>
  <p><input type="password" name="passwd" /></p>
 </li>
 <li>
  <h3>密码确认:</h3>
  <p><input type="password" name="passwd_conf" /></p>
 </li>
 <li>
  <h3>用户名:</h3>
  <p><input type="text" value="MyUserName" id="userName" name="user_name" /></p>
 </li>
 <li class="last">
  <a id="signup" href="#"><img src="images/buttonsubmit.png" style="vertical-align:middle;" /></a><img src="images/clickhere.png" style="vertical-align:middle;" />
 </li>
 </ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
深入理解js generator数据类型
Aug 16 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 #Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 #Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 #Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 #Javascript
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
You might like
第十一节--重载
2006/11/16 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
php数组遍历类与用法示例
2019/05/24 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
JS Loading功能的简单实现
2013/11/29 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
学习退步检讨书
2014/09/28 职场文书
党员评议个人总结
2014/10/20 职场文书
2014年财务科工作总结
2014/11/11 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
pytorch 使用半精度模型部署的操作
2021/05/24 Python
Django操作cookie的实现
2021/05/26 Python
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers