jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码


Posted in Javascript onAugust 21, 2015

本文实例讲述了jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码。分享给大家供大家参考。具体如下:

这里实现圆角表单,圆角输入框,无刷新验证,漂亮唯美,是对这款基于HTML5/CSS3/jQuery来实现的表单效果的简要概括,用HTML5可以实现很多超乎寻常的效果,从此你会喜欢上HTML5,会骂一下万恶的IE,到现在IE8还不支持HTML5,正悲哀着呢。

先来看看运行效果截图:

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5+css3+jQuery圆角注册表单效果</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
$("#RegisterUserForm label").inFieldLabels();
});
</script>
<style type="text/css">
html, body, h1, form, fieldset, input{margin: 0;padding: 0;border: none;}
body{font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
#registration{color: #fff;background: #2d2d2d;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(60,60,60)), color-stop(0.74, rgb(43,43,43)), color-stop(1, rgb(60,60,60)) );background: -moz-linear-gradient( center bottom, rgb(60,60,60) 0%, rgb(43,43,43) 74%, rgb(60,60,60) 100% );-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;margin: 10px;width: 430px;}
#registration a{color: #8c910b;text-shadow: 0px -1px 0px #000;}
#registration fieldset{padding: 20px;}
input.text{-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;border: solid 1px #444;font-size: 14px;width: 90%;padding: 7px 8px 7px 30px;-moz-box-shadow: 0px 1px 0px #777;-webkit-box-shadow: 0px 1px 0px #777;background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;background: url('images/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient( center bottom, rgb(225,225,225) 0%, rgb(215,215,215) 54%, rgb(173,173,173) 100% );background: url('images/inputSprite.png') no-repeat 4px 5px, -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(225,225,225)), color-stop(0.54, rgb(215,215,215)), color-stop(1, rgb(173,173,173)) );color: #333;text-shadow: 0px 1px 0px #FFF;}
input#email{background-position: 4px 5px;background-position: 4px 5px, 0px 0px;}
input#password{background-position: 4px -20px;background-position: 4px -20px, 0px 0px;}
input#name{background-position: 4px -46px;background-position: 4px -46px, 0px 0px;}
input#tel{background-position: 4px -76px;background-position: 4px -76px, 0px 0px;}
#registration h2{color: #fff;text-shadow: 0px -1px 0px #000;border-bottom: solid #181818 1px;-moz-box-shadow: 0px 1px 0px #3a3a3a;text-align: center;padding: 18px;margin: 0px;font-weight: normal;font-size: 24px;font-family: Lucida Grande, Helvetica, Arial, sans-serif;}
#registerNew{width: 203px;height: 40px;border: none;text-indent: -9999px;background: url('images/createAccountButton.png') no-repeat;cursor: pointer;float: right;}
#registerNew: hover{background-position: 0px -41px;}
#registerNew: active{background-position: 0px -82px;}
#registration p{position: relative;}
fieldset label.infield{color: #333;text-shadow: 0px 1px 0px #fff;position: absolute;text-align: left;top: 3px !important;left: 35px !important;line-height: 29px;}
</style>
</head>
<body>
<div id="registration">
 <h2>Create an Account</h2>
 <form id="RegisterUserForm" action="" method="post">
 <fieldset>
  <p>
  <label for="name">Name</label>
  <input id="name" name="name" type="text" class="text" value="" />
  </p>
  <p>
  <label for="tel">Phone Number</label>
  <input id="tel" name="tel" type="tel" class="text" value="" />
  </p>
  <p>
  <label for="email">Email</label>
  <input id="email" name="email" type="email" class="text" value="" />
  </p>
  <p>
  <label for="password">Password</label>
  <input id="password" name="password" class="text" type="password" />
  </p>
  <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
  <label for="acceptTerms">
  I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a>
  </label>
  </p>
  <p>
  <button id="registerNew" type="submit">Register</button>
  </p>
 </fieldset>
 </form>
</div>
</body>
</html>

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

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
javascript 节点遍历函数
Mar 28 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jquery结婚电子请柬特效源码分享
Aug 21 #Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 #Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 #Javascript
纯javascript实现图片延时加载方法
Aug 21 #Javascript
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
js日历功能对象
2012/01/12 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
python hough变换检测直线的实现方法
2019/07/12 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
会计专业自荐信
2014/06/03 职场文书
安全口号大全
2014/06/21 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
海洋天堂观后感
2015/06/05 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android