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 相关文章推荐
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
初识Node.js
Sep 03 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
js a标签点击事件
Mar 30 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python 深入理解yield
2008/09/06 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
戒赌保证书
2015/05/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
物资采购管理制度
2015/08/06 职场文书
电工实训心得体会
2016/01/14 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Django框架之路由用法
2022/06/10 Python
python 镜像环境搭建总结
2022/09/23 Python