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 相关文章推荐
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue绑定class的三种方法
Dec 24 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
在PHP中使用模板的方法
2008/05/24 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python中partial()基础用法说明
2018/12/30 Python
意大利男装网店:Vrients
2019/05/02 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
大二自我鉴定范文
2013/10/05 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
《司马光》教学反思
2016/02/22 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js