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 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
js post方式传递提交的实现代码
May 31 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
php获取网页内容方法总结
2008/12/04 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
js模拟实现Array的sort方法
2007/12/11 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js href的用法
2010/05/13 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
django批量导入xml数据
2016/10/16 Python
python中map()函数的使用方法示例
2017/09/29 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python提取log文件内容并画出图表
2019/07/08 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python with (as)语句实例详解
2020/02/04 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
健康状况证明书
2014/11/26 职场文书
论语读书笔记
2015/06/26 职场文书
趣味运动会加油词
2015/07/18 职场文书